2

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

在此处输入图像描述

这是一个带有 svg 代码的 jsfiddle

对于与白色相乘（中下正方形），我希望它根本不会使图像变亮，无论不透明度如何，因为与白色相乘基本上就像乘以 1。对于黑色（中上正方形），我希望它根据图像的透明度使图像变暗。这些是我在 GIMP 中玩耍时发生的事情。

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

我认为问题在于：

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

请告诉我是否有任何不清楚的地方。任何帮助表示赞赏:)

4

2 回答 2

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/

于 2013-08-03T00:53:28.703 回答
0

是不是因为您将部分透明的图像放在白色背景上而只是看起来变亮了？正如您所说，乘以白色将无效。

于 2013-08-02T18:03:01.477 回答