サファリでSVGが消える原因となるフィルタ（ドロップシャドウ）はなぜですか？

Question

私はD3.jsを使用してアプリケーションを開発しています。私はしばらくの間横行していましたが、最近に戻ってきました。今日、私はそれが過去にうまくいったけれども、モバイルSafari（iOS 9.3.1）またはデスクトップSafari（v9.1（11601.5.17.1））には、アプリ内のSVGマップが表示されなくなったことがわかりました。

私はSVGと単一のスタイルルールを抽出し、CodePenに配置して何が起こるかを示しました。 Chromeでは、このペンは上手く見えます。 Safariでは、それは完全に空白になります。

https://codepen.io/Kirkman/pen/pyKzeX

あなたはSafariでDOMを検査する場合は、パスが存在することを発見し、彼らは正しい形です。彼らは見えないように見えます。インスペクタでスタイル規則のチェックを外すと魔法の（明らかに、ドロップシャドウなし）表示されるようにマップ全体を引き起こし

スタイルルールは非常に簡単です：

svg { 
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4)); 
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4)); 
} 

これが機能しない理由誰もがお勧めすることはできますか？ Safariで何か変わったことがありましたか？

Answer 1

おそらく少し遅れていますが、私はあなたに私の答えを残します。私はSafariと同じ問題を抱えていましたが、これはSafariの問題/バグのようです。 SVGタグをdivのような別のHTMLタグでラッピングし、この要素にドロップシャドウフィルタを適用するだけで、このバグを回避できます。 ここでは、ラッパー要素

https://codepen.io/mauromjg/pen/rLaqWG

<div class="svg-wrapper"> 
    <svg>...</svg> 
</div> 

//CSS 
.svg-wrapper { 
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4)); 
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4)); 
} 

役に立てば幸いで修飾し、あなたの例を持っています！

Answer 2

ブラウザは物事を別々に計算し、何らかの理由でSafariがあなたを嫌っています。笑。

ただし、代わりにSVGフィルタを使用する必要があります。彼らははるかに信頼性が高いです。

SOURCE - w3schools

<svg height="140" width="140"> 
    <defs> 
    <filter id="f3" x="0" y="0" width="200%" height="200%"> 
     <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> 
     <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> 
     <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
    </filter> 
    </defs> 
    <rect width="90" height="90" stroke="green" stroke-width="3" 
    fill="yellow" filter="url(#f3)" /> 
</svg> 

役に立てば幸い！

Answer 3

私の場合、私はSVGフィルターを使用していたので、実際にはCSSソリューションを適用できませんでした。代わりに、ページを読み込んだ後にJavascriptを使ってCSS変換を適用することでSVGを表示することができました。ここでは、プレーンJSでの例です：SVGは、ブラウザのサイズを変更するか、インスペクタを使用してCSSスタイルルールを変更した後に現れる場合

setTimeout(function(){ 
document.getElementById("svg-element").style.display = "block"; 
},10); 

あなたは、これが動作するかどうかを知りたい場合は、参照してください。