in - SVG 编辑

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
Normative document	SVG 1.1 (2nd Edition)

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, the FillPaint 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, the StrokePaint 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 Content

<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://www.wenjiangs.com/wp-content/uploads/2020/mozilla/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://www.wenjiangs.com/wp-content/uploads/2020/mozilla/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>