Як застосувати стиль до вбудованого SVG?

107

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

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

object svg { 
    fill: #fff; 
}

html css svg

— Джошуа Сортіно
джерело

Я придумав легкий спосіб зробити це, який би чудово працював для того, що ви намагаєтеся зробити. Дивіться це запитання та відповіді: 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

@ MattW-D: вам, мабуть, слід просто відкрити нове питання для цього. Svgweb не потрібен у хромі.

— Ерік Дальстрем

Дякую, Еріку, дуже важко намагався змусити шрифт працювати в svg через css, пов'язуючи css у svg, працював першою спробу і дивом перехрестивши браузер!

— Дейв

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

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>

— Р Ревелі
джерело

Якщо єдиною причиною використання тегу для включення SVG є те, що ви не хочете захаращувати свій вихідний код розміткою з SVG, слід поглянути на інжектори SVG, такі як SVGInject .

Для ін'єкції SVG використовується Javascript для введення файлу SVG, вбудованого у ваш документ HTML. Це дозволяє отримати чистий HTML вихідний код, роблячи SVGs повністю стилізованими за допомогою CSS. Основний приклад виглядає так:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— Варуяма
джерело

Дивовижно! Дякую за акуратний інструмент.

— Deleplace