2016-04-13 12 views
1

私はSVGを数週間使っていたので、私は.glowクラスを与えたいと思っていました。クラスを追加すると、SafariでSVGが消えてしまいます。私はそれを修正する理由や手がかりがありません。私は親のdivを追加し、その1つに.glowクラスを与えようとしましたが、FireFoxで消えるようになりました(ただしSafariでは正しく表示されます...) どうすればこの問題を解決できますか?ドロップシャドウのために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> 

そして、これは私が使用しているクラスです:

私のSVGがある

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

あなたは '<フィルタを使用して試すことができます...' SVGシャドウを作成します。 Safariのバージョンがサポートされていることを確認するには、http://caniuse.com/#feat=svg-filtersをチェックしてください。 –

答えて

1
  • をあなたの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

+0

Thnx!しかし、それは修正ではありません:-( – MvanOeffel

+0

@MvanOeffel :: Answerは更新され、便利な場合は投票するようにしてください;) – argon

+0

@MvanOeffel ::完全な動作例を作成しました - プレビューで空のHTMLファイルをコピー&ウェブブラウザで開く..あなたは歓迎です:D – argon

0

これは例です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>

+0

注:この 'filter'の例では、2番目の同じ' path'(他の回答とは異なります) –

関連する問題