Блог

Главная - Вопросы по программированию - CSS @import не разрешен в SVG в Firefox, если SVG встроен в HTML с помощью тега

CSS @import не разрешен в SVG в Firefox, если SVG встроен в HTML с помощью тега

#html #css #svg #firefox #microsoft-edge

#HTML #css #svg #firefox #microsoft-edge

Вопрос:

Я получаю странное поведение в Firefox (78.5.0esr) в отношении содержимого SVG, встроенного в HTML через <img> тег. SVG содержит ссылку на внешнюю таблицу стилей с помощью директивы CSS «@import», например:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -64 128 128">
    <defs>
        <style type="text/css"><![CDATA[
            @import url('../css/rds.css');
            path {
                stroke: var(--error-color);
            }
        ]]></style>
    </defs>
    <path d="M -48 -48 L 48 48 M -48 48 L 48 -48"/>
</svg>

Теперь, если я открою этот SVG напрямую в Firefox, кажется, все работает нормально, правила из rds.css импортируются и выполняются нормально.
Но если я вставлю этот SVG в HTML-страницу с помощью тега img следующим образом:

 <img src="delete.svg"/>

сам SVG, похоже, был правильно загружен на страницу, но @import внутри CSS SVG, похоже, был проигнорирован.
Если я удалю директиву «@import» и помещу код CSS непосредственно в SVG, он будет отображаться нормально во всех контекстах.

Интересно, что то же самое, похоже, происходит в MS Edge. Я что-то здесь упускаю? Существует ли параметр безопасности, предотвращающий загрузку вторично связанного содержимого?

Ответ №1:

<img> файлы должны быть полностью автономными по соображениям конфиденциальности, то есть они не могут ссылаться на какие-либо внешние файлы.

Вам нужно будет включить все встроенные стили в сам файл, если вы хотите, чтобы это работало, поскольку @import не будет работать в контексте изображения.

Метки: ,