在Safari中使用feGaussianBlur，feColorMatrix和feBlend

我使用svg過濾器在垂直堆疊的三個圓圈之間創建「粘性」混合。在Chrome/Firefox中（減去一些平滑），我可以獲得理想的效果。在Safari中，我得到了非常不穩定和醜陋的東西。在Safari中使用feGaussianBlur，feColorMatrix和feBlend

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

Here is a Link to my full CodePen

閱讀各地後，我已經學會了Safari瀏覽器是非常敏感與feGaussianBlur和設置需要設置恰到好處地得到它才能正常工作。

有誰知道所需的調整，以獲得所有瀏覽器所需的效果？

來源

2016-08-31 Mark James Progano

** UPDATE1 ** 由於我無法得到這個工作，我結束了對象的SVG並將其粘貼在具有匹配顏色的圓圈後面。它似乎適用於所有瀏覽器。 [鏈接到更新代碼]（http://codepen.io/mprogano/pen/xEKBra） –

Safari上的SVG HTML內容過濾器非常棘手。如果您看看codepen上的粘性菜單示例，他們會非常精心地將所有內容都保存在GPU上 - 使用絕對位置，3D變換等等。如果你仔細觀察它們，它們也不會縮放任何東西。我建議在JavaScript動畫中完全在SVG內部完成這些部分。這樣你就不必去解決Safari的怪異問題。

來源

2016-09-01 03:49:09

在Safari中使用feGaussianBlur，feColorMatrix和feBlend

回答

相關問題