Question

我通过在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>

谢谢。

Answer 1

你应该添加 -webkit-filter：url（#aslan）; 你的风格定义。所以最终的样式定义应该是这样的：

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

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

1 个答案: