Question

我在我的网络应用上进行跨浏览器测试，我有一个渐变颜色元素来渲染。到目前为止，此功能在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>
        )
    }
}

Answer 1

尝试将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

SVG Linear Gradient在Safari中不起作用

1 个答案: