Как применить стиль к встроенному SVG? - PullRequest
Новая
       36

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

101 голосов
/ 05 февраля 2011

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

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

Ответы [ 3 ]

104 голосов
/ 05 февраля 2011

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

Однако, поскольку у вас есть тег <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.

9 голосов
/ 25 мая 2016

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

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>
2 голосов
/ 12 сентября 2018

Если единственная причина использования тега для включения 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...