我正在我的网络应用程序上进行跨浏览器测试，我有一个要渲染的渐变颜色元素。到目前为止，此功能在 Chrome 和 FireFox 中运行良好。但是，由于某种原因，它在 Safari 中不起作用，希望大家能够提供帮助。
export function renderCircle(size, number, data) {
if (number == 1) {
return (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width={size} height={size}
viewBox="0 0 400 400">
<g id="Dark_Blue">
<circle cx="200" cy="200" r="200" fill="#1DA1F2"/>
</g>
<g id="Logo__x2014__FIXED">
<path d="M163.4,305.5c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25
c-8.6,3.8-17.9,6.4-27.7,7.6c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2
c-26.6,0-48.2,21.6-48.2,48.2c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2
c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7
c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7
C110.8,297.5,136.2,305.5,163.4,305.5" fill="#fff"/>
</g>
</svg>
)
} else {
return (
<svg width={size} height={size} viewBox='0 0 128 128'
xmlns='http://www.w3.org/2000/svg' version='1.1' class="cluster-circle">
<defs>
<linearGradient id="_MyGradient_" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0" stopColor="#1DC4E9"/>
<stop offset="1" stopColor="#0077FF"/>
</linearGradient>
</defs>
<circle cx="64" cy="64" r="58" fill="url(#_MyGradient_)" stroke="#808080" strokeOpacity="0.5" strokeWidth="8" />
<text textAnchor="middle" x="50%" y="50%" dy=".35em" fontFamily="Helvetica" fontSize="40px" fill="white">{number}</text>
</svg>
)
}
}
最佳答案
尝试将 stopColor 更改为破折号:
<stop offset="0" stop-color="#1DC4E9"/>
<stop offset="1" stop-color="#0077FF"/>
我能够使用您的代码和屏幕截图中使用蓝色渐变渲染的圆圈在 Safari 中对此进行测试。
参见:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stop-color
关于javascript - SVG 线性渐变在 Safari 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48178112/