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中工作，它没有＆＃34; gooey效果＆＃34;看起来像Chrome或Firefox）

here is demo

我怎样才能让它起作用或js替代品？谢谢你的帮助。

Answer 1

在这个 page 中说：

<块引用>

SVG 过滤器有很好的支持，但并非所有浏览器都支持将它们应用于常规 DOM 元素，尤其是 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>

SVG过滤器feGaussianBlur和feColorMatrix无法在Safari / iOs中运行，替代方案？

1 个答案: