SVG線性漸變在Safari中不起作用

Question

我正在Web應用程序上進行跨瀏覽器測試，我有一個要呈現的漸變顏色元素。 到目前為止，此功能在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