in

**in** 属性标识给定滤镜基元的输入。

该值可以是下面定义的六个关键字之一，或者是一个字符串，该字符串与同一 <filter> 元素中先前 result 属性值匹配。如果未提供值并且这是第一个滤镜基元，则此滤镜基元将使用 SourceGraphic 作为其输入。如果未提供值并且这是后续滤镜基元，则此滤镜基元将使用前一个滤镜基元的结果作为其输入。

如果 result 的值在给定的 <filter> 元素中出现多次，则对该结果的引用将使用属性 result 值最接近的前一个滤镜基元。

您可以将此属性与以下 SVG 元素一起使用

使用说明

值	`SourceGraphic` \| `SourceAlpha` \| `BackgroundImage` \| `BackgroundAlpha` \| `FillPaint` \| `StrokePaint` \| `<filter-primitive-reference>`
默认值	第一个滤镜基元为 `SourceGraphic`，否则为前一个滤镜基元的结果
可动画	是

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> 元素将其中一个图像导入滤镜本身以进行混合。

注意：Firefox Bug 455986 表示 feImage 无法加载部分图像，包括文档中定义的圆形、矩形、路径或其他片段。为了使此示例在更多浏览器上都能正常工作，加载了徽标的完整外部图像。

HTML

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">
        <!-- This will not work. -->
        <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">
        <!-- This is a workaround. -->
        <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>

结果

规范

规范
滤镜效果模块级别 1 # element-attrdef-filter-primitive-in