Bagaimana cara menerapkan gaya ke SVG yang disematkan?

107

Saat SVG langsung disertakan dalam dokumen menggunakan <svg>tag, Anda dapat menerapkan gaya CSS ke SVG melalui lembar gaya dokumen. Namun, saya mencoba menerapkan gaya ke SVG yang disematkan (menggunakan <object>tag).

Apakah mungkin untuk menggunakan sesuatu seperti kode berikut?

object svg { 
    fill: #fff; 
}

html css svg

— Joshua Sortino
sumber

Saya datang dengan cara ringan untuk melakukan ini yang akan bekerja dengan baik untuk apa yang Anda coba lakukan. Lihat T&J ini: stackoverflow.com/questions/11978995/…

— Drew Baker

Berikut adalah jawaban yang benar-benar menyelesaikan pekerjaan (dari Memanipulasi properti gaya file svg eksternal dengan CSS .)

— Fabien Snauwaert

Jawaban:

108

Jawaban singkatnya: tidak, karena gaya tidak berlaku di seluruh batas dokumen.

Namun, karena Anda memiliki file <object> tag, Anda dapat memasukkan stylesheet ke dalam dokumen svg menggunakan skrip.

Sesuatu seperti ini, dan perhatikan bahwa kode ini mengasumsikan bahwa <object>telah dimuat sepenuhnya:

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);

Dimungkinkan juga untuk memasukkan <link>elemen untuk mereferensikan stylesheet eksternal:

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);

Opsi lainnya adalah menggunakan metode pertama, untuk menyisipkan elemen gaya, dan kemudian menambahkan aturan @import, mis styleElement.textContent = "@import url(my-style.css)".

Tentu saja Anda dapat langsung menautkan ke stylesheet dari file svg juga, tanpa melakukan skrip apa pun. Salah satu dari berikut ini seharusnya berfungsi:

<?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>

atau:

<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>

Pembaruan 2015: Anda dapat menggunakan plugin jquery-svg untuk menerapkan skrip js dan gaya css ke SVG yang disematkan.

— Erik Dahlström
sumber

Apakah ini metode untuk menautkan lembar gaya eksternal? Jika tidak, apakah mungkin?

— Joshua Sortino

Di atas menyisipkan elemen gaya ke dalam svg. Ya, Anda juga dapat memasukkan elemen tautan xhtml untuk menautkan ke lembar gaya eksternal, atau mungkin instruksi pemrosesan lembar gaya xml (lihat w3.org/Style/styling-XML.html ).

— Erik Dahlström

Ini Erik yang luar biasa! Namun, saya tidak bisa mendapatkan trik ini untuk bekerja di Chrome tanpa menyertakan svgweb: code.google.com/p/svgweb ... Ada ide apa yang saya lakukan salah?

— Matt WD

@ MattW-D: Anda mungkin sebaiknya membuka pertanyaan baru untuk itu. Svgweb tidak diperlukan di chrome.

— Erik Dahlström

Terima kasih Erik, benar-benar berjuang untuk membuat font-face bekerja di svg melalui css, menghubungkan css ke dalam svg bekerja percobaan pertama dan secara ajaib lintas browser!

— Dave

Anda dapat melakukan ini tanpa javsscrpt dengan meletakkan blok gaya dengan gaya Anda di dalam file SVG itu sendiri.

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

— R Reveley
sumber

Jika satu-satunya alasan menggunakan tag untuk menyertakan SVG adalah karena Anda tidak ingin kode sumber Anda berantakan dengan markup dari SVG, Anda harus melihat injektor SVG seperti SVGInject .

Injeksi SVG menggunakan Javascript untuk memasukkan file SVG sebaris ke dalam dokumen HTML Anda. Hal ini memungkinkan kode sumber HTML bersih sekaligus membuat SVG dapat ditata sepenuhnya dengan CSS. Contoh dasarnya terlihat seperti ini:

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

— Waruyama
sumber

Hebat! Terima kasih untuk alatnya yang rapi.

— Hapus