SVG use xlink не работает в Firefox баг или где то ошибка?

Question

На сайте подгружается отдельный HTML файл, в котором объявлен один большой SVG код. Пример:

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-arrow-left" viewBox="0 0 129.19 245.66"><title>icon-arrow-left</title>
    <path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M126.01 242.48L6.36 122.83 126.01 3.18"/>
</symbol>
<symbol id="icon-arrow-right" viewBox="0 0 129.19 245.66">
    <title>icon-arrow-right</title>
    <path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M3.18 3.18l119.65 119.65L3.18 242.48" data-name="Layer 1"/>
</symbol></svg>

В указанных местах использую обычный вызов. Пример:

<svg class="logo">
    <use xlink:href="#logo"></use>
</svg>

В Chrome и IE все работает, но в Firefox иконки отображаются исключительно только на главной страницы сайта на внутренних иконки не отображаются, вычитал что проблема в теге base. Решил проверить, если тег base убрать, то все корректно работает и на внутренних страницах сайта. В теге base указана ссылка на главную страницу сайта - всегда. Это особенность Firefox или где то допущена ошибка?

Включите строку xmlns:xlink="http://www.w3.org/1999/xlink" В этой строке должно быть впереди http:// www, которые не показываются. — Vlad from Moscow, Feb 02 '17 at 11:20
@Solunski.D Если Вас устраивает ответ, отметьте пожалуйста его, как решение вопроса. — Alexandr_TT, Feb 03 '17 at 15:48

score 4 · Accepted Answer · edited Apr 13 '17 at 12:53

Firefox любит определенность. Поэтому действительно необходимо полное заполнение шапки файла SVG. Кроме того он считает все пропорции исходя из заданных величин Viewport и viewBox. У вас они не заданы в шапке файла, но задан вторичный viewBox тега symbol. А он считается в зависимости от первичного viewBox в шапке, которого нет. Поэтому, если запустить ваш файл в чистом виде никуда не подключая, ничего не видно. В вашем проекте видимо накладываются какие-то дополнительные условия и в результате появляется исчезающий эффект, то видно то невидно. Предлагаю свой вариант файла, в котором по крайне мере всегда будут видны ваши скобочки.

<div class="row">
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
  width="600" height="245" viewBox="0 0 1200 490">
<symbol id="icon-arrow-left">
     <path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M126.01 242.48L6.36 122.83 126.01 3.18"/>
   </symbol>
 &lt;symbol id="icon-arrow-right"&gt;
 &lt;path fill="none" stroke="#b89d67" stroke-miterlimit="10" stroke-width="9" d="M3.18 3.18l119.65 119.65L3.18 242.48" /&gt;
 &lt;/symbol&gt;

 &lt;use x="0" xlink:href="#icon-arrow-left" /&gt;

<use x="850" xlink:href="#icon-arrow-right" />
</svg>
<div>

Координатами x и y можно регулировать положение скобочек. Цифрами во viewport и viewBox можно регулировать масштаб изображения. подробнее здесь. Как подключать файл в HTML страничку тут.

SVG use xlink не работает в Firefox баг или где то ошибка?

1 Answers1