Question

我想通过加载图像然后在其上应用多重颜色过滤器来创建图案。但是，我认为我无法理解in和in2属性，因为它无效。

我的目的是创建<img>并设置fill="green"，然后使用in="SourceGraphic" in2="FillPaint"。但我看到firefox和chrome都是白色帆布。任何人都知道为什么这不起作用？混合是否与in*="FillPaint"一起使用？我也尝试使用单独的矩形和图像，并将两者与in2="BackgroundImage"混合，但这也不起作用。也许是因为当我进入pattern时，“背景”不是我想的那样？

这是我的代码：

<filter id="multiply" primitiveUnits="objectBoundingBox">
<feBlend in="SourceGraphic" in2="FillPaint" mode="multiply"/>
</filter>

<pattern id="pattern" x="0" y="0" width="32" height="32"  viewBox="0 0 
   32 32" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="32" height="32" fill="green" xlink:href=
  "dirt.png" filter="url(#multiply)"/>
</pattern>

<rect x="0" y="0" width="64" height="64" fill="url(#pattern)"/>

Answer 1

大多数当前浏览器不支持Fillpaint作为过滤器输入。这就是它无法正常工作的原因。

SVG feBlend in Pattern？

1 个答案: