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>。如果提供了此值，则可以通过同一 filter 元素中后续滤镜图元的 in 属性引用处理此滤镜图元产生的图形。如果未提供值，则仅当下一个滤镜图元为其 in 属性未提供值时，输出才能作为其隐式输入被重新使用。
针对 BackgroundImage 的解决方法
BackgroundImage 在现代浏览器中不支持作为滤镜源（请参阅 feColorMatrix 兼容性表）。因此，我们需要通过 <feImage> 元素导入要混合到滤镜内部的图像之一。
注意： Firefox Bug 455986 导致 feImage 无法加载部分图像，包括文档中定义的圆形、矩形、路径或其他片段。为了让此示例在更多浏览器上运行，加载了完整的 logo 外部图像。
HTML
<svg
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="#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">
<!-- 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="#cc0000"
filter="url(#imageMultiply)" />
</svg>
结果
规范
| 规范 |
|---|
| 滤镜效果模块第 1 级 # element-attrdef-filter-primitive-in |