SafariでfeGaussianBlur、feColorMatrix、feBlendを使用

Question

私はsvgフィルタを使用して、垂直に積み重ねられた3つの円の間に "グーイ"ブレンドを作成しています。 Chrome/Firefox（いくつかのスムージングを除いて）では、私は希望の効果を得ます。 Safariでは、私は非常に不安定で醜い何かを得る。

Here is a Link to my full CodePen

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
     <defs> 
     <filter id="goo" x="0" y="0" color-interpolation-filters="sRGB"> 
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> 
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> 
      <feBlend in="SourceGraphic" in2="goo" /> 
     </filter> 
     </defs> 
    </svg> 

周り読んだ後、私はSafariがfeGaussianBlurと非常に厄介であることを学んだとの設定は、それが正常に動作させるためにちょうど設定する必要があります。

誰もが、すべてのブラウザで効果を得るために必要な調整を知っていますか？

Answer 1

SVG HTMLコンテンツのフィルタは、Safariでは非常に扱いにくいものです。もしあなたがcodepenのgooeyメニューの例を見るならば、絶対位置、3D変換などを使ってGPU上のすべてを保持するように非常に慎重に作られています。あなたがそれらをよく見ると、彼らはまた、何もスケールしません。私はちょうどSVGのインターフェイス内のこれらの部分を完全にjavascriptのアニメーションで行うことをお勧めします。そうすれば、Safariの奇妙なことを回避する必要はありません。