【发布时间】：2022-06-16 01:14:47
【问题描述】：
我正在尝试在我网站上的图像上应用 svg“湍流”过滤器。 问题是它在 FireFox 和 Chrome 上看起来不错：
但在 safari 上看起来很可怕：
似乎 Safari 正在将我的图像“分割”成图块......你有什么想法吗？
这是我的代码：
<svg>
<filter id="turbulence" x="0" y="0" width="100%" height="100%">
<feTurbulence
id="sea-filter"
numOctaves="3"
seed="2"
baseFrequency="0.02 0.05"
></feTurbulence>
<feDisplacementMap
scale="20"
in="SourceGraphic"
></feDisplacementMap>
<animate
xlinkHref="#sea-filter"
attributeName="baseFrequency"
dur="120s"
keyTimes="0;0.5;1"
values="0.02 0.06;0.04 0.08;0.02 0.06"
repeatCount="indefinite"
/>
</filter>
</svg>
<div className={styles.sea} style={{ background: `url(${sea})` }}></div>
CSS：
.sea {
position: absolute;
inset: 0;
width: 100vw;
height: 100%;
background-image: url("../../assets/images/Hero/Sea/sea.webp");
background-size: cover;
filter: url("#turbulence");
animation: floating 80s ease forwards infinite;
transform: translateY(0) scale(1.25);
}
我试图删除我的动画和我的变换，但它不起作用...
提前致谢！
【问题讨论】：
-
developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence 对 Safari 的支持对于该特定过滤器列为未知，但 MDN 上的过滤器页面显示 Safari 上的 SVG 不支持它们 developer.mozilla.org/en-US/docs/Web/CSS/filter 所以也许你得到了副产品Safari 不知道如何处理它，所以它只是在做......我想它想要什么？
标签： html css svg svg-animate svg-filters