Firefox игнорирует CSS, встроенный во внешние ссылки SVG ⇐ CSS

[Anonymous]

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

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

.circle {
fill: green;
}

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

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

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

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

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

ОБНОВЛЕНИЕ
Я не могу создать простой код прямо здесь, потому что для этого необходимо загрузить куда-нибудь файл SVG. Загрузка изображений здесь не принимает файлы SVG. Загрузка SVG из другого сервиса (домена) не разрешена. Поэтому я создал общедоступную песочницу, чтобы можно было тестировать и играть.
Песочница: https://codesandbox.io/p/sandbox/s7szqy

Подробнее здесь: https://stackoverflow.com/questions/798 ... references