Question

我想知道是否有办法对svg元素应用真正的乘法效应？我尝试了在这里找到的各种解决方案，但似乎svg中的乘法效果是应用于对象本身而不是像photoshop那样背后的元素。有没有办法在svg或任何其他方法中做到这一点？

    <div id="bg">
    <svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 55.7" xml:space="preserve">
        <filter id="multiply">
            <feBlend mode="multiply"/>
        </filter>
        <g>...
    </svg>
    </div>

#logo:hover {
        filter:url(#multiply);
}

Answer 1

目前无法将SVG形状与CSS定义的背景相乘（除了非常新的合成和混合内容，只有在我所知的情况下才能在标记后面提供。）

可以通过SVG过滤器获得多重效果，但您必须遵循SVG过滤器约定以及了解当今浏览器中实现的过滤器功能的子集。由于单位系统的差异和优势，可以将现有的SVG文件中的适当大小的过滤效果变成一种挑战。怪异。

这是完全在SVG内联元素中完成的图形版本，它表明可以获得乘法效果但是如果它们都在SVG Universe中完成。

 <defs>
    <filter id="multiply">
       <feImage xlink:href="http://imageshack.com/a/img21/7676/y2hg.jpg" result="bg"/> 
       <feBlend mode="multiply" in="SourceGraphic" in2="bg"/>
    </filter>
 </defs>
   <g filter="url(#multiply)"> etc.

FWIW：CSS和SVG单元系统以及过滤器单元之间的相互作用使得正确调整大小具有挑战性。

Answer 2

当浏览器实施'mix-blend-mode'规范时，您可以使用Compositing and Blending Level 1执行此操作。

#logo:hover {
    mix-blend-mode: multiply;
}

请参阅fiddle。

在Chrome Canary中，启用实验性网络平台功能标记（chrome：// flags / #enable-experimental-web-platform-features），看它是否有效。

Answer 3

好的，所以我找到了2种不同的方法来感谢Paulie_D。

1）Pixastic：http://www.pixastic.com/lib/

它是一个允许使用混合模式的JavaScript库。然而，它与IE不兼容，但是根据文档，IE有一些方法可以使用一些原生过滤器。

2）在我的情况下，我只想看到我的文件的行，因此通过使用photoshop频道，我制作了墙的alpha马赛克。

我真的不知道哪一个是更优化的选项，但是我选择了第二个选项，因为它使得我的背景因马赛克而变亮（大约40kb vs之前的200kb）。

非常感谢Paulie，我真的希望将来他们能够在浏览器中实现多重效果。

用svg实现多重效果？

3 个答案: