Разница между тегами <object> и <use> выявляет ошибку chrome/safari
В chrome есть известная ошибка, которая не поддерживает внешнюю ссылку url() должным образом, она может ссылаться только на идентификаторы в одном и том же файле: ошибка chrome. Это известная проблема в Chrome с начала 2012 года. Есть некоторые признаки недавнего интереса, чтобы исправить это.
Safari демонстрирует такое же поведение, поэтому, вероятно, имеет ту же ошибку. Firefox не имеет ошибки.
Я столкнулся с этой проблемой по более тонкому пути, поэтому я документирую это здесь на случай, если другие столкнутся с этим, или, может быть, я неправильно понял, что происходит, и в этом случае, пожалуйста, прокомментируйте.
Вы можете увидеть код, запущенный здесь: plnkr (для демонстрации проблемы нужен внешний файл, который я не знаю, как это сделать в инструменте stackru). Запустите его в Chrome, чтобы увидеть проблему (красный круг обводки имеет градиентную заливку, синий обводка - нет). Запустите его в Firefox, и оба круга будут заполнены градиентом.
Два файла воспроизводятся ниже. Они должны быть отдельными файлами, чтобы раскрыть ошибку.
Index.html:
<body>
<object width="200" height="200" data="test.svg"></object>
<svg width="200" height="200" viewBox="0 0 200 200">
<use stroke="blue" stroke-width="4" xlink:href="test.svg#my-circle"/>
</svg>
</body>Test.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="SVGID_1_" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<g id='my-circle'>
<circle cx="50" cy="50" r="40" fill="url(#SVGID_1_)" />
</g>
</defs>
<use stroke="red" stroke-width="2" xlink:href="#my-circle"/>
<!--
-->
</svg>Два круга созданы с градиентной заливкой. Оба экземпляра создаются из index.html. Круги определены в test.svg. Внутри test.svg есть внутренняя ссылка fill: url(#gradient). Который, на первый взгляд, должен работать на хром. Действительно, он работает, когда создается экземпляр круга с помощью тега "object", но не работает, когда создается экземпляр с помощью тега "use". Я полагаю, что причина этой разницы заключается в разнице между тем, как эти двое создают свой контент. Я думаю, что "объект" создает свой отдельный мир, в котором работает test.svg. Однако "use" клонирует кружок в родительский html-файл. Таким образом, при использовании 'use' последующая ссылка на градиент с помощью метода url() фактически является из index.html в test.svg, т.е. является внешней ссылкой, которая является известной проблемой.