in
in
in属性标识给定的滤镜基元的输入。
该值可以是以下定义的六个关键字中的一个，也可以是与同一<filter>元素中的先前的result属性值相匹配的字符串。如果没有提供值，并且这是第一个滤镜基元，那么此滤镜基元将SourceGraphic用作其输入。如果没有提供值并且这是一个后续的滤镜基元，那么这个滤镜基元将使用来自前一个过滤器基元的结果作为其输入。
如果result的值在给定<filter>元素中多次出现，那么给定result属性的值，对该result的引用将使用最近的前一个滤镜基元。
用法上下文
| Categories | None |
|---|---|
| Value | SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |
SourceGraphic——此关键字代表初始输入到<filter>元素中的图形元素。
对于BackgroundImage的解决方法
正确的做法是使用一个<feImage> 元素，导入其中一个图像并将它混合在过滤器本身，而不是使用in="BackgroundImage"。
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 xlink:href="https://developer.mozilla.org/files/6457/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 xlink:href="https://developer.mozilla.org/files/6457/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>
结果
适用元素
以下元素可以使用该in属性
- <feBlend>
- <feColorMatrix>
- <feComponentTransfer>
- <feComposite>
- <feConvolveMatrix>
- <feDiffuseLighting>
- <feDisplacementMap>
- <feGaussianBlur>
- <feMorphology>
- <feOffset>
- <feSpecularLighting>
- <feTile>
