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

Question

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

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

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

object svg { 

    fill: #fff; 

}

590 3

html css svg

3 ответов:

Comments

Ничего не найдено.

Erik Dahlström · Accepted Answer · 2016-03-18 23:01:09

короткий ответ: нет, так как стили не действуют через границы документа.

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

R Reveley · Accepted Answer · 2016-05-25 14:43:22

вы можете сделать это без javsscrpt, поместив блок стиля с вашими стилями внутри самого файла SVG.
<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>

Waruyama · Accepted Answer · 2018-09-12 13:03:19

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

SVG injection использует Javascript для вставки SVG-файла в ваш HTML-документ. Это позволяет очистить исходный код HTML при Свгс полностью styleable с CSS. Основной пример выглядит так:
<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>