Firefox удваивает значения преобразования для встроенных элементов SVG

Я использую встроенный SVG с элементом <use> вот так:

<a href="/">
    <svg><use xlink:href="#icon-home"></use></svg>
</a>

При наведении у меня есть анимация преобразования, примененная к SVG (префиксы опущены для простоты):

a:hover svg {
    transform: translateX(10px);
}

Это прекрасно работает во всех браузерах, кроме Firefox. Вместо перемещения SVG на 10 пикселей он перемещается на 20 пикселей. То же самое происходит со значением поворота. Если поворот установлен на 180 градусов, Firefox будет поворачивать SVG на 360 градусов.

Вот Codepen: http://codepen.io/kgrote/pen/ZBKXMO

Это происходит только со встроенными элементами SVG. Я полагаю, что это как-то связано с элементом SVG, имеющим второй вложенный тег <use>.

Как заставить Firefox правильно преобразовывать встроенный SVG? Является ли это ошибкой Firefox, о которой следует сообщить?


svg css css-transforms firefox
person kmgdev    schedule 23.11.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я предполагаю, что Firefox видит вложенный тег <use> как второй <svg> внутри тега <svg>. Итак, это выглядит так:

<svg>
    <use xlink:href="#icon-home">
        <svg></svg>
    </use>
</svg>

Сначала он применяет transform к первому элементу svg, а затем ко второму псевдо-svg. Вы можете использовать селектор :first-child, чтобы все работало. Вот рабочий пример http://codepen.io/anon/pen/xgVGNW.

person cr1msaun    schedule 11.01.2017

arrow_upward
0
arrow_downward

Почему бы просто не написать тег <use> как self-closing tag. Тогда он будет работать в кросс-браузере:

<use xlink:href="#icon-home" />

Так:

<a href="/">
   <svg><use xlink:href="#icon-home" /></svg>
</a>

См. спецификацию W3C для <use>

https://www.w3.org/TR/SVG11/struct.html#UseElement

См. MDN (сеть разработчиков Mozilla) <use>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

person Jonathan Marzullo    schedule 11.01.2017
comment
На какой ОС вы это тестировали? Я тестировал Windows 10 в Firefox 50.1.0 и вижу, что он анимируется. Вы используете Firefox на Mac? Спасибо! - person Jonathan Marzullo; 12.01.2017
comment
Ага, FF 49.0.1 на OSX 10.11.6. - person kmgdev; 15.01.2017
comment
Вы можете сообщить об этом в Mozilla Bugzilla, если хотите, чтобы они могли это исправить. bugzilla.mozilla.org ) - person Jonathan Marzullo; 16.01.2017