Почему Firefox игнорирует внутренний CSS (во внешнем файле SVG), когда на внешний SVG ссылаются с помощью тегов <svg><us ⇐ CSS

[Anonymous]

У меня есть простой внешний SVG-файл Circles.svg, содержащий соответствующий CSS в теге :

Код: Выделить всё

.circle {
fill: green;
}

.use {
fill: blue;
scale: 2;
transform-origin: center;
}

Затем в HTML я ссылаюсь на этот файл SVG, используя теги :

Код: Выделить всё

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



[*]Почему это происходит?
[*]Есть ли способ преодолеть это, сохраняя стили внутри внешнего SVG-файла и ссылаясь на них с помощью тегов ?


Подробнее здесь: https://stackoverflow.com/questions/798 ... nal-svg-re