SVG参考手册
属性 | Attributes
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(#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>