我正在嘗試在我網站上的影像上應用 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);
}
我試圖洗掉我的影片和我的變換，但它不起作用......
提前感謝！
uj5u.com熱心網友回復：
這是 Safari 中的一個錯誤：當湍流被轉換時，它會失去拼接效果。取消 transform: scale(1.2) ，它至少在桌面 Safari 中運行良好。
衛生提示 - 始終將 color-interpolation-filters="sRGB" 添加到 SVG 過濾器，這樣您就不會在默認的 linearRGB 顏色空間中觸發 Safari 的許多錯誤之一。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/492511.html
標籤：html css svg svg-动画 svg 过滤器