Search code examples
csssvgdropshadow

SVG disappears on Safari because of drop-shadow

I started using SVG since a couple of weeks, so I created one that I wanted to give the .glow class. When adding the class, the SVG disappears on Safari and I have no clue why, or how to fix it. I tried to add a parent div and give that one the .glow class, but that just makes it disappear in FireFox (but then it displays correctly in Safari...?) How can I solve this problem?

My SVG is:

<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>

And this is the class I'm using:

.glow {
    -webkit-filter: drop-shadow(0px 0px 5px #94FF51);
    filter: drop-shadow(0px 0px 9px #94FF51); 
}
Solution
    • You have an error in your SVG code: missing closing "g" tag.

    Update: 1 (manual)

    You can make a duplicate of your path and apply a "blur" filter on it.
    Here's a complete example, copy + paste into new file, save & open in your web browser:

    <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>

    You can also use JavaScript to dynamically do this (on the fly) without having to manually copy & apply filters.

    Update: 2 (auto) - full example 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>

    Here is a preview (partial screenshot): code result