SVG 过滤器 feGaussianBlur 和 feColorMatrix 在 Safari/iOs 中不起作用，替代方案？

Question

我在 codepen 的演示中看到了这段代码。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12" />
                <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" />
            </filter>
        </defs>
</svg>

它在 Chrome 中运行良好，但在 Safari/iOs 中不起作用(我猜 feGaussianBlur 在 safari 中不起作用，它没有像 Chrome 或 Firefox 那样的“粘性效果”)

here is demo

我怎样才能使它工作或 js 替代品？谢谢你的帮助。

Answer 1

在此 page说:

SVG filters have good support, but not all browsers support them being applied to regular DOM elements, notably Safari.

所以使用 <svg>和 <circle>元素而不是 <div>...</div>以获得更好的兼容性。

html, body, div, svg {
     height: 100%;
     width: 100%;
}
 @keyframes colors {
     0% {
         fill: #FBD301;
    }
     25% {
         fill: #FF3270;
    }
     50% {
         fill: #208BF1;
    }
     75% {
         fill: #AFE102;
    }
     100% {
         fill: #FBD301;
    }
}
 @keyframes rotate-1 {
     20% {
         transform: rotate(180deg) translateX(-100px);
    }
     25% {
         transform: rotate(180deg) translateX(0);
    }
}
 @keyframes rotate-2 {
     25% {
         transform: none;
    }
     45% {
         transform: rotate(180deg) translateY(100px);
    }
     50% {
         transform: rotate(180deg) translateY(0);
    }
}
 @keyframes rotate-3 {
     50% {
         transform: none;
    }
     70% {
         transform: rotate(180deg) translateX(100px);
    }
     75% {
         transform: rotate(180deg) translateX(0);
    }
}
 @keyframes rotate-4 {
     75% {
         transform: none;
    }
     95% {
         transform: rotate(180deg) translateY(-100px);
    }
     100% {
         transform: rotate(180deg) translateY(0);
    }
}
 circle {
     transform-origin: center;
     animation: colors ease 4s infinite;
}
 circle:nth-child(2) {
     animation: colors ease 4s infinite, rotate-1 ease 4s infinite;
}
 circle:nth-child(3) {
     animation: colors ease 4s infinite, rotate-2 ease 4s infinite;
}
 circle:nth-child(4) {
     animation: colors ease 4s infinite, rotate-3 ease 4s infinite;
}
 circle:nth-child(5) {
     animation: colors ease 4s infinite, rotate-4 ease 4s infinite;
}
 

<svg style="width: 0;position: absolute; pointer-events: none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="goo" color-interpolation-filters="sRGB">
            <feGaussianBlur in="SourceGraphic" stdDeviation="12" />
            <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" />
            <feBlend in="SourceGraphic" in2="goo" />
        </filter>
    </defs>
</svg>
<div role="img" style="filter: url('#goo')">
    <svg>
        <circle cx="50%" cy="50%" r="30" />
        <circle cx="50%" cy="50%" r="25" />
        <circle cx="50%" cy="50%" r="25" />
        <circle cx="50%" cy="50%" r="25" />
        <circle cx="50%" cy="50%" r="25" />
    </svg>
</div>