svg不同的渲染导致chrome和safari具有相同的linearGradient id

Question

Codepen Here

上面的SVG与chrome和Safari不一致，在查找ID时，chrome渲染是否与safari不同？

以下svg只有linearGradient对应的颜色不一致，但引用id相同

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

            <defs>
                <linearGradient id="MyGradient">
                    <stop offset="5%"  stop-color="green"/>
                    <stop offset="95%" stop-color="gold"/>
                </linearGradient>
            </defs>

            <rect fill="url(#MyGradient)"
                x="10" y="10" width="100" height="100"/>
        </svg>
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

            <defs>
                <linearGradient id="MyGradient">
                    <stop offset="5%"  stop-color="red"/>
                    <stop offset="95%" stop-color="pink"/>
                </linearGradient>
            </defs>

            <rect fill="url(#MyGradient)"
                x="10" y="10" width="100" height="100"/>
        </svg>

我知道每个id都必须是唯一的。我的问题是为什么同样的id safiar diffrence with chrome

Answer 1

这是一个有效的代码，但您可能需要更改一些值。

代码：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 268 115" style="enable-background:new 0 0 268 115;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="7.9984" y1="57.7264" x2="107.9984" y2="57.7264">
	<stop  offset="0.1" style="stop-color:#FEDF00"/>
	<stop  offset="0.9" style="stop-color:#21B24B"/>
</linearGradient>
<rect x="7.7" y="7.7" style="fill:url(#SVGID_1_);" width="100" height="100"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="155.9984" y1="57.7264" x2="255.9984" y2="57.7264">
	<stop  offset="0.1" style="stop-color:#B9529F"/>
	<stop  offset="0.5356" style="stop-color:#D73D5C"/>
	<stop  offset="0.9" style="stop-color:#ED2024"/>
</linearGradient>
<rect x="155.7" y="7.7" style="fill:url(#SVGID_2_);" width="100" height="100"/>
</svg>