in

使用上のメモ

SourceGraphic

このキーワードは、<filter> 要素への元となるグラフィック要素を表します。

SourceAlpha

このキーワードは、<filter> 要素の元の入力となったグラフィック要素を表します。SourceAlpha は、アルファチャンネルのみが使用される点を除き、SourceGraphic と同じルールをすべて備えています。

BackgroundImage

このキーワードは、<filter> 要素が呼び出された時点における、フィルター領域下の SVG 文書のスナップショットを表します。

BackgroundAlpha

BackgroundImage と同じですが、アルファチャンネルのみが使用されます。

FillPaint

このキーワードは、フィルター効果の対象要素における fill プロパティの値を表します。多くの場合、FillPaint は全面が不透明ですが、図形がグラデーションやパターンで塗りつぶされており、それ自体に透明または半透明の部分が含まれている場合は、そうではない可能性があります。

StrokePaint

このキーワードは、フィルタ効果の対象要素における stroke プロパティの値を表します。多くの場合、StrokePaint は全体が不透明ですが、図形がグラデーションやパターンで塗りつぶされており、それ自体に透明または半透明の部分が含まれている場合は、そうではない可能性があります。

<filter-primitive-reference>

この値はフィルタープリミティブの名前であり、<custom-ident> の形で指定されます。この値が指定された場合、このフィルタープリミティブの処理によって生成されたグラフィックスは、同じフィルター要素内の後続のフィルタープリミティブの in 属性によって参照することができます。値が指定されていない場合、出力は、後続のフィルタープリミティブが in 属性に値を指定していない場合に限り、そのフィルタープリミティブへの暗黙的な入力として再利用可能となります。

BackgroundImage の回避策

現行ブラウザーでは、BackgroundImage はフィルターソースとして対応していません（feComposite の互換性表を参照してください）。そのため、<feImage> 要素を使用して、混合する画像のいずれかをフィルター内部に取り込む必要があります。

HTML

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="backgroundMultiply">
      <!-- これは動作しない -->
      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
    </filter>
  </defs>
  <image
    href="mdn_logo_only_color.png"
    x="10%"
    y="10%"
    width="80%"
    height="80%" />
  <circle
    cx="50%"
    cy="40%"
    r="40%"
    fill="#cc0000"
    filter="url(#backgroundMultiply)" />
</svg>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageMultiply">
      <!-- これは回避策 -->
      <feImage
        href="mdn_logo_only_color.png"
        x="10%"
        y="10%"
        width="80%"
        height="80%" />
      <feBlend in2="SourceGraphic" mode="multiply" />
    </filter>
  </defs>
  <circle
    cx="50%"
    cy="40%"
    r="40%"
    fill="#cc0000"
    filter="url(#imageMultiply)" />
</svg>

svg {
  width: 200px;
  height: 200px;
  display: inline;
}

結果

仕様書