グラフィックスを合成したいときには<feComposite>要素を子要素とする<filter>要素を定義します。
このフィルターには次の表に示す属性があります。
属性 | 説明 |
---|---|
id | フィルターのID |
x、y | フィルターを適用するキャンバスの左上の座標 |
width | フィルターを適用するキャンバスの幅 |
height | フィルターを適用するキャンバスの高さ |
in | グラフィックス入力 |
in2 | グラフィックスの2番目の入力 |
operator | over|in|out|atop|xor|alithmetic |
k1 | k1*A*B+k2*A+k3*B+k4のk1 |
k2 | k1*A*B+k2*A+k3*B+k4のk2 |
k3 | k1*A*B+k2*A+k3*B+k4のk3 |
k4 | k1*A*B+k2*A+k3*B+k4のk4 |
filterUnits | フィルター領域の単位 |
primitiveUnits | フィルタープリミティブの単位 |
result | フィルター処理をした結果の名前 |
値 | 解説(AとBは合成する二つの入力) |
---|---|
over | BにAを重ねた結果を生成する( |
in | Bの不透明部分と重なりあうAを生成する |
out | Bの不透明な領域の外にあるAを生成する |
atop | Bの内側にあるAの部分とAの外側にあるBの部分を重ねた結果を生成する |
xor | AとBの重なっていない部分結果を生成する |
arithmetic | 4個の係数を指定しk1*A*B+k2*A+k3*B+k4の値を生成する |
次の例は四角いイメージの一部を楕円でクリッピングするコードの例です。
<svg width="400" height="450" stroke-width="1px" style="font-size:36px">
<defs>
<!-- フィルターの定義 -->
<filter id="over" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage"
operator="over" result="comp" />
<feMerge>
<feMergeNode in="over" />
<feMergeNode in="comp" />
</feMerge>
</filter>
<filter id="in" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage"
operator="in" result="comp" />
<feMerge>
<feMergeNode in="over" />
<feMergeNode in="comp" />
</feMerge>
</filter>
<filter id="out" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage"
operator="out" result="comp" />
<feMerge>
<feMergeNode in="over" />
<feMergeNode in="comp" />
</feMerge>
</filter>
<filter id="atop" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage"
operator="atop" result="comp" />
<feMerge>
<feMergeNode in="over" />
<feMergeNode in="comp" />
</feMerge>
</filter>
<filter id="xor" filterUnits="objectBoundingBox"
x="-5%" y="-5%" width="110%" height="110%">
<feComposite in="SourceGraphic" in2="BackgroundImage"
operator="xor" result="comp" />
<feMerge>
<feMergeNode in="over" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<!-- over -->
<rect x="10" y="40" width="300" height="20" stroke="pink" fill="pink" />
<text x="20" y="50" filter="url(#over)" stroke="blue" fill-opacity=".5">
SVGは楽しいな~
</text>
<!-- in -->
<rect x="10" y="90" width="300" height="20" stroke="pink" fill="pink" />
<text x="20" y="100" filter="url(#in)" stroke="blue" fill-opacity=".5">
SVGは楽しいな~
</text>
<!-- out -->
<rect x="10" y="140" width="300" height="20" stroke="pink" fill="pink" />
<text x="20" y="150" filter="url(#out)" stroke="blue" fill-opacity=".5">
SVGは楽しいな~
</text>
<!-- atop -->
<rect x="10" y="190" width="300" height="20" stroke="pink" fill="pink" />
<text x="20" y="200" filter="url(#atop)" stroke="blue" fill-opacity=".5">
SVGは楽しいな~
</text>
<!-- xor -->
<rect x="10" y="240" width="300" height="20" stroke="pink" fill="pink" />
<text x="20" y="250" filter="url(#xor)" stroke="blue" fill-opacity=".5">
SVGは楽しいな~
</text>
</svg>
次のように表示されます。