Связывание с CSS в SVG, встроенный тегом IMG

У меня есть страница, содержащая несколько файлов SVG. Чтобы синхронизировать стиль этих SVG файлов, я хотел создать единую таблицу стилей, чтобы хранить всю информацию о стилях.

Однако, если включить SVG, как показано ниже, CSS не будет применяться. Любой, у кого есть решение, или просто невозможно связать с другими (CSS) файлами в SVG, на которые ссылается <img src="..." />?

См. примерный код ниже. При загрузке pic.svg непосредственно в браузере применяются все стили, и можно увидеть зеленый прямоугольник. Но при открытии page.htm все, что нужно увидеть, это черный прямоугольник. Таким образом, очевидно, что ни один из определенных стилей не был применен.

page.htm

<!DOCTYPE html>
<html>
<body>
    <img src="pic.svg" style="width: 100px; height: 100px;" />
</body>
</html>

pic.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    >
    <rect x="10" y="10" width="80" height="80" />
</svg>

styles.css

rect { 
    stroke: black;
    fill: green;
}

EDIT

Из ответа, что на короткое время появился здесь, я получил эту ссылку на спецификацию и следующую цитату. По-моему, это говорит о том, что приведенный выше код должен работать!

Автономный документ SVG, встроенный в HTML или XML-документ с элементами "img," (HTML) или "образ (SVG)

[...]

Цитирование из вашей ссылки" Таблицы стилей, определенные в любом месте документа SVG, на который ссылаются (в элементах стиля или атрибутах стиля, или во внешних таблицах стилей, связанных с инструкцией по обработке таблиц стилей ) весь документ SVG, но не влияют на ссылочный документ (возможно, HTML или XHTML) ".

Ответ 1

Альтернативой является использование тега <object> в вашем html: -

<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

Это БОЛЬШОЙ позор тега <img> не будет работать. Я не хочу вмешиваться в процесс взлома с преобразованием SVG в URI данных. Это связано с межсайтовыми уязвимостями при косвенной загрузке ресурсов и использованием "Open Redirector".

Обратите внимание, что в моем тестировании на прошлой неделе метод тега <img> работает в IE10, но ни Chrome, ни FireFox.

Я не знаю, почему <object> разрешено, а <img> - нет. Надзор?

Ответ 2

В целях конфиденциальности изображения должны быть отдельными файлами. Вы можете использовать CSS, если вы кодируете таблицу стилей как uri данных. Например.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    >
    <rect x="10" y="10" width="80" height="80" />
</svg>

Существуют различные онлайн-преобразователи для URI данных.

Ответ 3

Ответы выше замечательны. Тем не менее, мне показалось, что это просто, просто встроить в него собственный тег SVG на моей веб-странице. Это позволило SVG наследовать стили шрифтов, объявленные в моей странице CSS без проблем...