in
in 属性标识输入的原语。
其值可以是下面六种关键词中的一种,或者是一个字符串匹配在同一个<filter>
元素中前面的原语的result
属性值。如果没有提供值并且这是 filter 中第一个原语,那么原语将相当于使用 SourceGraphic 作为输入值。如果没有提供值并且这不是第一个原语,那么原语将使用前面原语的 result 属性值作为输入。
如果result
的值在同一个<filter>
中出现多次,那么将使用前面的距离使用该result
值的原语最近的该 result 值的原语作为输入。
除了 SourceGraphic 和**<filter-primitive-reference> (引用原语)** , 关键词都没有在现代浏览器中实现.(译者注:SourceAlpha 也被现代浏览器支持)
Usage context
Categories | None |
---|---|
Value | SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> |
Animatable | Yes |
- SourceGraphic
-
该关键词表示图形元素自身将作为
<filter>
原语的原始输入。 - SourceAlpha
-
该关键词表示图形元素自身将作为
<filter>
原语的原始输入。SourceAlpha 与 SourceGraphic 具有相同的规则除了 SourceAlpha 只使用元素的透明度。 - BackgroundImage
-
该关键词表示 filter 元素当前底下的区域的图形快照将被调用。
- BackgroundAlpha
-
跟 BackgroundImage 相同除了只使用透明度。
- FillPaint
-
This keyword represents the value of the
fill
property on the target element for the filter effect. In many cases, theFillPaint
is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts. - StrokePaint
-
This keyword represents the value of the
stroke
property on the target element for the filter effect. In many cases, theStrokePaint
is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.
BackgroundImage 的解决方案
我们需要使用 <feimage>
原语引入一个图像混合到过滤器本身内来替代使用"BackgroundImage".
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
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>
效果
元素
规范
Specification |
---|
Filter Effects Module Level 1 # element-attrdef-filter-primitive-in |