为什么 SVG 过滤器不适用于我的代码中的 HTML 元素？答案

【问题标题】：Why SVG filters does not apply to HTML element in my code?为什么 SVG 过滤器不适用于我的代码中的 HTML 元素？
【发布时间】：2016-09-28 13:42:06
【问题描述】：

我通过在 Inkscape v 0.91 中应用过滤器创建了一个漂亮的 svg 框架。我也想将它应用于 HTML 元素。但是我不能。我期待 div 元素变成像 svg 的 rect 元素一样的框架。你能解释一下为什么 svg 过滤器不适用于 div 元素吗？许多人似乎能够将 svg 过滤器应用于 html 元素。

<html>
<head>
</head>
<body>
<div style="
    background-color: aliceblue;
    width: 300px;
    height: 300px;
    filter: url(#aslan);
">Duh ! Its not working </div>

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="297mm" width="210mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 744.09448819 1052.3622047">


    <defs>
        <filter id="aslan" style="color-interpolation-filters:sRGB">
            <feGaussianBlur stdDeviation="0.5" result="result1"></feGaussianBlur>
            <feBlend result="result5" mode="normal" in2="result1" in="SourceGraphic"></feBlend>
            <feGaussianBlur stdDeviation="3" result="result6" in="result5"></feGaussianBlur>
            <feComposite operator="xor" result="result8" in2="result6" in="result6"></feComposite>
            <feComposite operator="in" result="fbSourceGraphic" in2="result8" in="result6"></feComposite>
            <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0 " result="fbSourceGraphicAlpha" in="fbSourceGraphic"></feColorMatrix>
            <feGaussianBlur stdDeviation="0.5" result="result0" in="fbSourceGraphic"></feGaussianBlur>
            <feSpecularLighting lighting-color="rgb(255,255,255)" specularConstant="2" result="result1" specularExponent="55" in="result0" surfaceScale="2">
                <fePointLight y="-10000" x="-5000" z="20000"></fePointLight>
            </feSpecularLighting>
            <feComposite in2="fbSourceGraphicAlpha" k1="1" result="result2" in="result1" operator="arithmetic"></feComposite>
            <feComposite in2="result2" k3="1" k2="0.5" result="result4" in="fbSourceGraphic" operator="arithmetic"></feComposite>
            <feComposite operator="over" result="result91" in2="result4" in="result9"></feComposite>
            <feBlend result="fbSourceGraphic" mode="screen" in2="result91"></feBlend>
            <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" result="fbSourceGraphicAlpha" in="fbSourceGraphic"></feColorMatrix>
            <feFlood result="flood" flood-color="rgb(0,0,0)" in="fbSourceGraphic" flood-opacity=".49804"></feFlood>
            <feComposite operator="in" result="composite1" in2="fbSourceGraphic" in="flood"></feComposite>
            <feGaussianBlur result="blur" stdDeviation="3.6" in="composite1"></feGaussianBlur>
            <feOffset result="offset" dx="-12.2396" dy="6"></feOffset>
            <feComposite operator="over" result="fbSourceGraphic" in2="offset" in="fbSourceGraphic"></feComposite>
            <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" result="fbSourceGraphicAlpha" in="fbSourceGraphic"></feColorMatrix>
            <feFlood result="flood" flood-color="rgb(0,0,0)" in="fbSourceGraphic" flood-opacity=".49804"></feFlood>
            <feComposite operator="in" result="composite1" in2="fbSourceGraphic" in="flood"></feComposite>
            <feGaussianBlur result="blur" stdDeviation="3.6" in="composite1"></feGaussianBlur>
            <feOffset result="offset" dx="-12.2" dy="6"></feOffset>
            <feComposite operator="over" result="fbSourceGraphic" in2="offset" in="fbSourceGraphic"></feComposite>
            <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" result="fbSourceGraphicAlpha" in="fbSourceGraphic"></feColorMatrix>
            <feConvolveMatrix divisor="1" kernelMatrix="0 -0.15 0 -0.15 1.6 -0.15 0 -0.15 0" targetY="1" order="3 3" targetX="1" in="fbSourceGraphic"></feConvolveMatrix>
        </filter>
    </defs>
    <rect transform="matrix(.59683 0 0 .59683 72.863 46.68)" height="115.16" filter="url(#aslan)" width="220.21" y="127.3" x="202.74" fill="#0f0"></rect>
</svg> 
</body>
</html>

谢谢。

【问题讨论】：

我发现它与浏览器的CSS引擎有关，我应该使用 -webkit-filter: 而不是 filter: 。对于有类似问题的人，我不会删除问题。

标签： html css svg filter

【解决方案1】：

你应该添加 -webkit-过滤器：url（#aslan）；到你的风格定义。所以最终的样式定义应该是这样的：

<div style="
    background-color: aliceblue;
    width: 300px;
    height: 300px;
    filter: url(#aslan);
    -webkit-filter: url(#aslan);
">Duh ! Its not working </div>

【讨论】：