个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 10:29:29 24 4
gpt4 key购买 nike

我从几个星期开始就开始使用 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); 
}

最佳答案

  • 您的 SVG 代码中有一个错误:缺少结束“g”标记。

更新:1(手动)

您可以复制您的路径并在其上应用“模糊”滤镜。
这是一个完整的示例，复制并粘贴到新文件中，保存并在您的网络浏览器中打开:

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

这是预览(部分截图): code result

关于css - 由于阴影，SVG 在 Safari 上消失了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36601479/

24 4 0
文章推荐： Python Kivy Canvas 不会更新
文章推荐： linux - 在 Linux 中访问文件时挂接图形弹出窗口的最佳位置是什么？
文章推荐： java - 连接到远程任务管理器失败。这可能表明远程任务管理器已丢失
文章推荐： python - % : 'int' and 'str' 不支持的操作数类型
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com