Как применить стиль к встроенному SVG?

107

Когда SVG напрямую включен в документ с помощью <svg>тега, вы можете применить стили CSS к SVG через таблицу стилей документа. Однако я пытаюсь применить стиль к встроенному SVG (с помощью <object>тега).

Можно ли использовать что-нибудь вроде следующего кода?

object svg { 
    fill: #fff; 
}
html css svg Джошуа Сортино
источник
1
Я придумал легкий способ сделать это, который отлично подойдет для того, что вы пытаетесь сделать. См. Эти вопросы и ответы: stackoverflow.com/questions/11978995/…
Дрю Бейкер,
Вот ответ, который действительно выполняет свою работу (из раздела «Управление внешними свойствами стиля svg-файла с помощью CSS .)»
Фабьен Снауварт

Ответы:

108

Краткий ответ: нет, поскольку стили не применяются за пределами документа.

Однако, поскольку у вас есть <object>тег, вы можете вставить таблицу стилей в документ svg с помощью скрипта.

Что-то вроде этого, и обратите внимание, что этот код предполагает, что <object>загружен полностью:

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

Также можно вставить <link>элемент для ссылки на внешнюю таблицу стилей:

var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

Еще один вариант - использовать первый метод, чтобы вставить элемент стиля, а затем добавить правило @import, например styleElement.textContent = "@import url(my-style.css)".

Конечно, вы также можете напрямую ссылаться на таблицу стилей из файла svg, не выполняя никаких сценариев. Любое из следующего должно работать:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... rest of document here ...
</svg>

или:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  ... rest of document here ...
</svg>

Обновление 2015: вы можете использовать плагин jquery-svg для применения скриптов js и стилей css к встроенному SVG.

Эрик Дальстрём
источник
Это метод связывания внешней таблицы стилей? Если нет, возможно ли это?
Джошуа Сортино
Вышеупомянутый элемент стиля вставляется в файл svg. Да, можно также вставить элемент ссылки xhtml для связи с внешней таблицей стилей или, возможно, инструкцию по обработке таблицы стилей xml (см. W3.org/Style/styling-XML.html ).
Эрик Дальстрем
Это классный Эрик! Однако мне не удалось заставить этот трюк работать в Chrome без включения svgweb: code.google.com/p/svgweb ... Есть идеи, что я делаю неправильно?
Matt WD
1
@ MattW-D: тебе, наверное, стоит просто задать для этого новый вопрос. Svgweb не нужен в хроме.
Erik Dahlström
Спасибо, Эрик, очень изо всех сил пытался заставить font-face работать в svg через css, привязка css к svg сработала с первой попытки и чудесным образом перекрестила браузер!
Дэйв
10

Вы можете сделать это без javsscrpt, поместив блок стилей с вашими стилями внутри самого файла SVG.

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>
R Reveley
источник
3

Если единственная причина использования тега для включения SVG заключается в том, что вы не хотите загромождать исходный код разметкой из SVG, вам следует взглянуть на инжекторы SVG, такие как SVGInject .

Внедрение SVG использует Javascript для встраивания файла SVG в ваш HTML-документ. Это позволяет получить чистый исходный код HTML, делая при этом SVG полностью стилизованными с помощью CSS. Базовый пример выглядит так:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
Варуяма
источник
Потрясающие! Спасибо за аккуратный инструмент.
Deleplace