<feComposite>

グラフィックスを合成したいときには<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 フィルター処理をした結果の名前
<feComposite>のoperator演算子の値
解説(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>
  

次のように表示されます。

SVGは楽しいな~ SVGは楽しいな~ SVGは楽しいな~ SVGは楽しいな~ SVGは楽しいな~

関連項目

filter


SVG目次 inserted by FC2 system