Gömülü bir SVG'ye stil nasıl uygulanır?

107

Bir SVG, <svg>etiketi kullanılarak bir belgeye doğrudan eklendiğinde, CSS stillerini belgenin stil sayfası aracılığıyla SVG'ye uygulayabilirsiniz. Ancak, gömülü bir SVG'ye ( <object>etiketini kullanarak ) bir stil uygulamaya çalışıyorum .

Aşağıdaki kod gibi herhangi bir şey kullanmak mümkün mü?

object svg { 
    fill: #fff; 
}

html css svg

— Joshua Sortino
kaynak

Bunu yapmak için, yapmaya çalıştığınız şey için harika olacak hafif bir yol buldum. Bu Soru-Cevap bölümüne bakın: stackoverflow.com/questions/11978995/…

— Drew Baker

İşte işi gerçekten

— bitiren

Yanıtlar:

108

Kısa cevap: hayır, çünkü stiller belge sınırları boyunca uygulanmaz.

Bununla birlikte, bir <object>etiketiniz olduğundan, stil sayfasını komut dosyasını kullanarak svg belgesine ekleyebilirsiniz.

Bunun gibi bir şey ve bu kodun <object>tam olarak yüklendiğini varsaydığını unutmayın :

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>Harici bir stil sayfasına başvurmak için bir öğe eklemek de mümkündür :

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

Yine başka bir seçenek, bir stil öğesi eklemek için ilk yöntemi kullanmak ve ardından bir @import kuralı eklemektir, örn styleElement.textContent = "@import url(my-style.css)".

Elbette, herhangi bir komut dosyası yazmadan svg dosyasından da stil sayfasına doğrudan bağlanabilirsiniz. Aşağıdakilerden herhangi biri çalışmalıdır:

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

veya:

<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 Güncellemesi: Gömülü bir SVG'ye js betikleri ve css stilleri uygulamak için jquery-svg eklentisini kullanabilirsiniz .

— Erik Dahlström
kaynak

Bu, harici bir stil sayfasını bağlama yöntemi mi? Değilse, bu mümkün mü?

— Joshua Sortino

Yukarıdakiler svg'ye bir stil öğesi ekler. Evet, harici bir stil sayfasına veya muhtemelen bir xml-stil sayfası işleme talimatına bağlanmak için bir xhtml bağlantı öğesi eklemek de mümkündür (bkz. W3.org/Style/styling-XML.html ).

— Erik Dahlström

Bu oldukça harika Erik! Ancak, svgweb: code.google.com/p/svgweb ... eklemeden bu numarayı Chrome'da çalıştırmayı başaramadım ... Yanlış yaptığım herhangi bir fikrin var mı?

— Matt WD

@ MattW-D: Muhtemelen bunun için yeni bir soru açmalısınız. Chrome'da Svgweb gerekli değildir.

— Erik Dahlström

Teşekkürler Erik, gerçekten css ile svg'de çalışmak için yazı tipi yüzü almaya çalışırken, css'i svg'ye bağlayarak ilk denemede mucizevi bir şekilde çapraz tarayıcı çalıştı!

— Dave

Bunu javsscrpt olmadan, stillerinizle birlikte SVG dosyasının içine bir stil bloğu yerleştirerek yapabilirsiniz.

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

— R Reveley
kaynak

SVG'yi dahil etmek için etiketi kullanmanın tek nedeni, kaynak kodunuzu SVG'deki işaretlemeyle karıştırmak istemiyorsanız, SVGInject gibi SVG enjektörlerine bir göz atmalısınız .

SVG enjeksiyonu, bir SVG dosyasını HTML belgenize satır içi olarak enjekte etmek için Javascript kullanır. Bu, SVG'leri CSS ile tamamen biçimlendirilebilir hale getirirken temiz HTML kaynak koduna izin verir. Temel bir örnek şuna benzer:

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

— Waruyama
kaynak

Harika! Güzel alet için teşekkürler.

— 2019