Question

我开始使用SVG几周了，所以我创建了一个我想给.glow类的。添加类时，SVG在Safari上消失，我不知道为什么或如何解决它。我试图添加一个父div并给它一个.glow类，但这只是让它在FireFox中消失（但它在Safari中正确显示......？）我该如何解决这个问题？

我的SVG是：

<svg width="1517px" height="404px" viewBox="0 0 1517 404" version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" class="header__ekg-line glow">
<g id="Page-1" stroke="#94FF51" stroke-width="3" fill="none" fill-rule="evenodd">
<path id="path-1" d="M4.95180412,255.835938 L125.546576,255.835938 L153,
                     216 L180.341376,255.835938 L233,255.835938 L272.999991,36 L332.132813,
                     358.570312 L364.179526,255.835938 L432.999991,255.835938 L452.999991,
                     216 L472.999991,255.835938 L593.000022,255.835938 L633.000022,
                     136 L691.152344,365.105469 L733.000022,255.835938 L783.013999,
                     255.835938 L806.199219,212.730469 L833.000022,255.835938 L933.000022,
                     255.835938 L972.507812,118.167969 L1027.14062,372.949219 L1070.29761,
                     255.835938 L1113,255.835938 L1142.48977,176 L1171.26575,
                     255.835938 L1236.24756,255.835938 L1302.23244,16
                     L1384.50781,327.195312 L1421.99416,255.835938 L1513.00002,255.835938">
</path>
</g>
</svg>

这是我正在使用的课程：

.glow {
    -webkit-filter: drop-shadow(0px 0px 5px #94FF51);
    filter: drop-shadow(0px 0px 9px #94FF51); 
}

Answer 1

您的SVG代码出错：错过了关闭＆＃34; g＆＃34;标签

更新：1（手动）

您可以复制您的路径并应用＆＃34;模糊＆＃34;过滤它。
这是一个完整的示例，复制+粘贴到新文件中，另存为＆amp;在您的网络浏览器中打开：

<svg
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="1517"
    height="404"
    viewBox="0 0 1517 404">

    <defs>
        <filter id="fltBlur">
            <feGaussianBlur stdDeviation="5" />
        </filter>
    </defs>

    <g id="Page-1" style="fill:none;stroke:#94ff51;stroke-width:3">
        <path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0" />
        <path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0"
        style="filter:url(#fltBlur)" />
    </g>

</svg>

您还可以使用JavaScript动态执行此操作（即时），而无需手动复制和应用过滤器。

更新：2（自动） - 完整示例HTML + SVG + JavaScript

<html>
    <head></head>
    <body>

        <svg id="svgDoc" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1517" height="404" viewBox="0 0 1517 404" style="background:#323436">
            <defs>
                <filter id="glow0">
                    <feGaussianBlur stdDeviation="0" />
                </filter>
            </defs>
            <g id="line1" style="fill:none;stroke:#94ff51;stroke-width:3">
                <path d="m 4.9518,255.836 120.5952,0 L 153,216 l 27.341,39.836 52.659,0 L 273,36 l 59.133,322.57 32.047,-102.734 68.82,0 20,-39.836 20,39.836 120,0 L 633,136 691.152,365.105 733,255.836 l 50.014,0 23.185,-43.106 26.801,43.106 100,0 39.508,-137.668 54.632,254.781 43.16,-117.113 42.7,0 29.49,-79.836 28.78,79.836 64.98,0 65.98,-239.836 82.28,311.195 37.48,-71.359 91.01,0" />
            </g>
        </svg>             

        <script>
            var glow = function(noid, size, tint, opac)
            {
                var root, temp, defs, glow, node, copy, home;

                this.incr += 1;

                root = document.getElementById('svgDoc');
                temp = document.createElement('svg');
                node = root.getElementById(noid);
                copy = node.cloneNode(true);
                home = node.parentNode;
                defs = root.getElementsByTagName('defs')[0];
                glow = root.getElementById('glow0').cloneNode(true);

                size = (size || 1);
                tint = (tint || '#000000');
                opac = (opac || 1);

                glow.id = ('glow'+ this.incr);
                glow.innerHTML = (glow.innerHTML.split('Deviation="0"').join('Deviation="'+size+'"'));
                defs.appendChild(glow);

                copy.style.filter = 'url(#'+glow.id+')';
                copy.style[((copy.style.fill != 'none') ? 'fill' : 'stroke')] = tint;
                copy.style.opacity = opac;

                home.removeChild(node);
                home.appendChild(copy);
                home.appendChild(node);
            }
            .bind({incr:0});


        // -----------------------------------
            glow('line1', 3, '#94ff51', 0.7);  // This line does it!
        // -----------------------------------

        </script>

    </body>
</html>

这是预览（部分截图）：

由于阴影，SVG在Safari上消失了

1 个答案:

更新：1（手动）

更新：2（自动） - 完整示例HTML + SVG + JavaScript