SVG feBlend 在模式中？答案

【问题标题】：SVG feBlend in Pattern?SVG feBlend 在模式中？
【发布时间】：2013-03-01 17:42:47
【问题描述】：

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

我正在尝试创建<img> 并设置fill="green"，然后使用in="SourceGraphic" in2="FillPaint"。但我在 Firefox 和 Chromium 中都看到了全白画布。任何人都知道为什么这不起作用？混合是否适用于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)"/>

【问题讨论】：

我刚刚注意到 SVG 文档中的 feBlend 示例：w3.org/TR/SVG/images/filters/feBlend.svg 在任一浏览器中都不起作用...
该示例在 Inkscape 中有效。当然，如果您要构建它们以在浏览器中使用，那也无济于事。
好吧，问题似乎出在 feBlend 的实现上。我尝试了 feColorMatrix （对角矩阵与乘法相同）并且它有效。我不知道它在性能方面如何比较，但我只是在一个小图像上做，然后被平铺，所以我认为这并不重要。
Jesse：啊，感谢您确认这实际上是一个实现错误！

标签： design-patterns svg svg-filters

【解决方案1】：

大多数当前浏览器不支持将填充画作为过滤器输入。这就是它不起作用的原因。

【讨论】：