/
index.md
82 lines (62 loc) · 1.84 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
---
title: <feOffset>
slug: Web/SVG/Element/feOffset
l10n:
sourceCommit: 3a1ef2abc8233835f0b0cc73afaf36e44edaf4a1
---
{{SVGRef}}
**`<feOffset>`** は SVG のフィルタープリミティブで、入力画像をオフセットします。入力画像全体は {{SVGAttr("dx")}} と {{SVGAttr("dy")}} 属性で指定した値だけオフセットされます。
## 使用コンテキスト
{{svginfo}}
## 属性
- {{SVGAttr("in")}}
- {{SVGAttr("dx")}}
- {{SVGAttr("dy")}}
## DOM インターフェイス
この要素は {{domxref("SVGFEOffsetElement")}} インターフェイスを実装しています。
## 例
### SVG
```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="offset" width="180" height="180">
<feOffset in="SourceGraphic" dx="60" dy="60" />
</filter>
</defs>
<rect x="0" y="0" width="100" height="100" stroke="black" fill="green" />
<rect
x="0"
y="0"
width="100"
height="100"
stroke="black"
fill="green"
filter="url(#offset)" />
</svg>
```
### 結果
{{EmbedLiveSample("Example", 200, 200)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{SVGElement("filter")}}
- {{SVGElement("animate")}}
- {{SVGElement("set")}}
- {{SVGElement("feBlend")}}
- {{SVGElement("feColorMatrix")}}
- {{SVGElement("feComponentTransfer")}}
- {{SVGElement("feComposite")}}
- {{SVGElement("feConvolveMatrix")}}
- {{SVGElement("feDiffuseLighting")}}
- {{SVGElement("feDisplacementMap")}}
- {{SVGElement("feFlood")}}
- {{SVGElement("feGaussianBlur")}}
- {{SVGElement("feImage")}}
- {{SVGElement("feMerge")}}
- {{SVGElement("feMorphology")}}
- {{SVGElement("feSpecularLighting")}}
- {{SVGElement("feTile")}}
- {{SVGElement("feTurbulence")}}
- [SVG チュートリアル: フィルター効果](/ja/docs/Web/SVG/Tutorial/Filter_effects)