具有feImage和feBlend的SVG过滤器，乘法混合模式无法按预期工作

Question

我正在尝试创建一个SVG，其中使用各种混合模式将黑色或白色方块叠加在图像上。我正在为图片使用带有feImage原语的滤镜，使其与feColorMatrix部分透明，并将其与带有feBlend的正方形混合。 normal混合模式可以像我期望的那样工作，但multiply没有。这是我得到的：

Here's a jsfiddle with the svg code

对于乘以白色（底部中间正方形），我预计它不会使图像变亮，无论不透明度如何，因为乘以白色基本上就像乘以1.对于黑色（中间正方形），我期望它根据透明度使图像变暗。当我在GIMP玩游戏时会发生这些事情。

SVG规范在这里有各种混合模式的公式，如果你想知道（我不能发布超过2个链接与我当前的声誉，抱歉）。 www.w3.org/TR/SVG/filters.html#feBlendElement

我认为问题是：

在我的过滤器中，我实际上将不透明度应用于feImage，而不是SourceGraphic，只是因为尽管进行了大量实验，我还是无法弄清楚如何以相反的方式进行操作。理想情况下，方块是部分透明的，然后叠加在图像上。为in="SourceGraphic"设置feColorMatrix无法正常工作，也不会在opacity上设置rect属性（它们似乎与之前的默认白色svg背景混合）与图像混合）。我确信有一些简单的解决方案，但我找不到它。

如果有什么不清楚，请告诉我。任何帮助表示赞赏：）

Answer 1

为了爱上帝，请向您的过滤器添加明确的内容和结果。否则就像试图推意大利面。这就是你要做的事情：

    <filter color-interpolation-filters="sRGB" x="-1.0" y="-1.0" width="3.0"
        xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
        xlink:actuate="onLoad" height="3.0" 
        xlink:show="other" id="blend-square-multiply">
        <feImage result="raw photo" x="0" y="0" width="522" height="530"
                 xlink:href="http://wallpapersus.com/wallpapers/2012/11/Pirates-Of-The-Caribbean-On-Stranger-Tides-05-2048x2048.jpg"/>
        <feComposite result="photo clip" in="raw photo" in2="SourceGraphic" operator="in"/>
        <feColorMatrix in="SourceGraphic" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .5 0" type="matrix" result="color-trans"/>
        <feBlend mode="multiply" in="photo clip" in2="color-trans"/>
    </filter>

通过一些编辑来明确我正在编辑的内容：http://jsfiddle.net/Wu96x/

Answer 2

是不是因为你在白色背景上放置了部分透明的图像而显得太亮了？正如你所说，乘以白将不起作用。