in

使用上下文

SourceGraphic

该关键字表示图形元素自身将作为 <filter> 元素的原始输入。

SourceAlpha

该关键字表示图形元素自身将作为 <filter> 元素的原始输入。SourceAlpha 与 SourceGraphic 具有相同的规则，除了前者只使用元素的 alpha 通道。

BackgroundImage

该关键字表示调用 <filter> 元素时，滤镜区域下方的 SVG 文档的图形快照。

BackgroundAlpha

与 BackgroundImage 相同，除了只使用 alpha 通道。

FillPaint

该关键字表示应用滤镜效果的目标元素的 fill 属性值。在许多情况下，FillPaint 在任何地方都是不透明的，但如果形状使用包含透明或半透明部分的渐变或图案进行绘制，那么情况可能不同。

StrokePaint

该关键字表示应用滤镜效果的目标元素的 stroke 属性值。在许多情况下，StrokePaint 在任何地方都是不透明的，但如果形状使用包含透明或半透明部分的渐变或图案进行绘制，那么情况可能不同。

<filter-primitive-reference>

该值是用于为 <custom-ident> 形式的滤镜原语赋予名称。如果提供了该值，那么处理该滤镜原语的图形可以被同一个滤镜元素中的后续的滤镜原语的 in 属性引用。如果没有提供任何值，且下一个滤镜原语未给其 in 属性提供值，那么输出将只能作为下一个滤镜原语的隐式输入。

BackgroundImage 的解决方案

在现代浏览器中，BackgroundImage 不支持作为滤镜源（请参见 feComposite 兼容性表）。因此，我们需要在滤镜内部使用 <feImage> 元素导入一个图像进行混合。

HTML

<div style="width: 420px; height: 220px;">
  <svg
    style="width:200px; height:200px; display: inline;"
    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="#c00"
      style="filter:url(#backgroundMultiply);" />
  </svg>

  <svg
    style="width:200px; height:200px; display: inline;"
    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="#c00"
      style="filter:url(#imageMultiply);" />
  </svg>
</div>

结果

规范