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>元素中的图形元素。
SourceAlpha——此关键字代表初始输入到<filter>元素中的图形元素。除了只使用alpha通道之外，SourceAlpha其他规则与SourceGraphic都是一样的。
BackgroundImage——该关键字代表<filter>调用该元素时过滤区域下的SVG文档的图像快照。BackgroundAlpha ——除了了只使用alpha通道之外，其他规则与BackgroundImage相同。
FillPaint——此关键字表示过滤器效果的目标元素上的fill属性的值。在很多情况下，FillPaint在任何地方都是不透明的，但是如果一个形状是用渐变或者图案（其本身包括透明或者半透明的部分）来绘制的话，情况就不一样了。
StrokePaint——此关键字表示过滤器效果的目标元素上的stroke属性值。在很多情况下，它们在StrokePaint任何地方都是不透明的，但是如果一个形状是用渐变或图案（其本身包括透明或半透明的部分）进行绘制，则可能不是这种情况。
对于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(?developer/section/1423945/);" />
</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(?developer/section/1423945/);"/>
</svg>
</div>结果
适用元素
以下元素可以使用该in属性
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feGaussianBlur>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
