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

【问题标题】：SVG filter feGaussianBlur and feColorMatrix not working in Safari/iOs, alternatives?SVG 过滤器 feGaussianBlur 和 feColorMatrix 在 Safari/iOs 中不起作用，替代方案？
【发布时间】：2016-04-26 01:03:00
【问题描述】：

我在 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 替代品？感谢您的帮助。

【问题讨论】：

请补充您所说的不在 safari 中工作是什么意思。预期的结果是什么？您遇到了什么？
我认为 feGaussianBlur 在 safari 中不起作用，它不像 Chrome 或 Firefox 那样具有“粘糊糊的效果”，抱歉！我的英语不好
可以确认：仍然无法在 Safari（macOS 或 iOS）中运行。寻找解决方案。如果我找到它会在这里发布。

标签： svg svg-filters

【解决方案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>

【讨论】：