SVG在Safari上因为阴影而消失

自从几个星期以来我开始使用SVG，所以我创建了一个我想给.glow类的东西。在添加类时，SVG在Safari上消失，我不知道为什么，或者如何解决它。我试图添加一个父级的div，并给那个.glow类，但这只是让它在FireFox中消失（但它在Safari中正确显示......）我该如何解决这个问题？SVG在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); 
}

来源

2016-04-13 MvanOeffel

您可以尝试使用'<过滤器...'作出SVG的影子。检查http://caniuse.com/#feat=svg-filters以确保支持Safari的版本。 –

你在你的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>

这里是一个预览（部分屏幕截图）：

来源

2016-04-13 14:37:49 argon

Thnx！但这不是解决方法:-( – MvanOeffel

@MvanOeffel ::答案已更新，请记得投票，如果有用;） – argon

@MvanOeffel ::一个完整的工作示例 - 预览，只需复制并粘贴到空的HTML文件并保存，然后在网页浏览器中打开..不客气：D – argon

这是一个例子SVG filters，如果您有深色背景，请调整flood-color。

<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"> 
 
    <defs> 
 
<filter id="drop-shadow"> 
 
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
 
    <feOffset dx="0" dy="0" result="offsetblur"/> 
 
    <feFlood flood-color="#000000"/> 
 
    <feComposite in2="offsetblur" operator="in"/> 
 
    <feMerge> 
 
    <feMergeNode/> 
 
    <feMergeNode in="SourceGraphic"/> 
 
    </feMerge> 
 
</filter> 
 
    </defs> 
 
    
 
<g id="Page-1" stroke="#94FF51" stroke-width="3" fill="none" fill-rule="evenodd"> 
 
<path filter="url(#drop-shadow)"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>

来源

2016-04-13 19:05:15

注意：这个“过滤器”示例不需要第二个相同的“路径”（与其他答案不同） –

SVG在Safari上因为阴影而消失

回答

更新：1（手动）

更新：2（自动） - 全例如HTML + SVG + JavaScript的

相关问题