SVG другой результат рендеринга в Chrome и Safari с тем же идентификатором linearGradient

Question

Кодовый код здесь

Выше SVG несовместимо с Chrome и Safari. Отличается ли отрисовка Chrome от Safari при поиске идентификатора?

Следующий svg только linearGradient, соответствующий цвет несовместим, но тот же идентификатор ссылки

<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 safiar diffrence с хромом

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>