【发布时间】：2021-12-17 14:13:16
【问题描述】：
<p class="flex align_center"><span class="has_bg_img setting_coin_span" id="setting_coin_span_header"></span> 0</p>
.setting_coin_span {
width: 30px;
height: 30px;
margin-right: 10px;
background-image: url(images/coin_ico2.svg);
}
我的 React 项目中有一个如上的示例元素。我将带有 css 的 svg 背景图像应用于 p 标签内的 span 标签，它在 chrome 和 edge 浏览器中完美运行。但是当我在 safari 中尝试时，svg 渲染不正确，并且照片无法正确显示
您可以在下面的示例照片中看到它。在 chrome 中，它在上面和下面的元素中都有效，但在 safari 中它并没有完全显示在上面，但下面显示不正确。
这是我的 svg 文件：
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" mimeType="image/svg+xml" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b)">
<path d="M17 34C26.3891 34 34 26.3891 34 17C34 7.6109 26.3891 0 17 0C7.6109 0 0 7.6109 0 17C0 26.3891 7.6109 34 17 34ZM17 9.7869L24.2131 17L17 24.2131L9.7869 17L17 9.7869Z" fill="url(#paint0_linear)"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.366337 17.3661H10.2373V16.4521H0.366337V17.3661Z" fill="url(#paint1_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6339 0.366825L16.6339 10.2378L17.5479 10.2378L17.5479 0.366825L16.6339 0.366825Z" fill="url(#paint2_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5487 33.6332L17.5487 23.7622L16.6348 23.7622L16.6348 33.6332L17.5487 33.6332Z" fill="url(#paint3_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.6337 16.4513L23.7627 16.4513L23.7627 17.3652L33.6337 17.3652L33.6337 16.4513Z" fill="url(#paint4_linear)"/>
<defs>
<filter id="filter0_b" x="-10" y="-10" width="54" height="54" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="19.8899" y1="-9.0353" x2="18.622" y2="34.5971" gradientUnits="userSpaceOnUse">
<stop offset="0.234375" stop-color="#7D54F2"/>
<stop offset="1" stop-color="#702BE1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="10.2373" y1="17.3661" x2="0.366337" y2="17.3661" gradientUnits="userSpaceOnUse">
<stop stop-color="#9163F2"/>
<stop offset="1" stop-color="#A478FF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="16.6339" y1="10.2378" x2="16.6339" y2="0.366825" gradientUnits="userSpaceOnUse">
<stop stop-color="#9163F2"/>
<stop offset="1" stop-color="#A478FF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="17.5487" y1="23.7622" x2="17.5487" y2="33.6332" gradientUnits="userSpaceOnUse">
<stop stop-color="#9163F2"/>
<stop offset="1" stop-color="#A478FF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="23.7627" y1="16.4513" x2="33.6337" y2="16.4513" gradientUnits="userSpaceOnUse">
<stop stop-color="#9163F2"/>
<stop offset="1" stop-color="#A478FF" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
你认为是什么问题？
【问题讨论】：
-
谢谢。我不知道这是否是全部问题，但 caniuse 在 Safari 中将 feFlood 和 feBlend 报告为“状态未知”，我在 iPad 上看到呈现的是交叉类型图形，而不是我看到的填充图标在 Edge/Windows10 上，因此 Safari 可能不完全支持一个或其他或两个属性。见stackoverflow.com/questions/69820782/…
-
哦，我本来打算为你制作一个实时 sn-p，但在 Monterey 上的 Safari 15.1 上，它的工作原理与 Chrome 和 Firefox 上的完全一样：jsfiddle.net/65r3wvpg 你能确认你确实看到了问题吗在这个小提琴中添加有关浏览器版本的详细信息？
-
当我在mac chrome中打开jsfiddle链接时，它呈现正确，但是当我在safari中打开它时，它是不正确的。
-
而我的 mac safari 版本是：版本 14.1 (16611.1.21.161.6)
-
...所以他们可能在最新版本中修复了它。你还在 BigSur 上吗？您不能从那里将 Safari 更新到 v15，对吧？