Bir SVG doğrudan bir belge <svg> etiketini kullanarak dahil olduğunda, belgenin stil ile SVG CSS stilleri uygulayabilirsiniz. Ancak, (<object> etiketini kullanarak) gömülü olan bir SVG stil uygulamak için çalışıyorum.

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

object svg { 
    fill: #fff; 
}

Kısa cevap: stilleri belge sınırlarında geçerli olmadığına göre hayır.

<object> bir etiket var beri ancak, svg belgesi script kullanarak stil ekleyebilirsiniz.

Böyle bir şey, ve bu kod <object> tam dolu olduğunu varsayar 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);

Aynı zamanda harici bir stil sayfası başvurusu <link> bir öğe eklemek için:

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

Başka bir seçenek, ilk yöntem, tarz bir öğe eklemek ve bir @import kuralı, e ekleyin için kullanmaktır.g styleElement.textContent = "@import url(my-style.css)".

Tabii ki doğrudan herhangi bir komut dosyası olmadan svg dosyası stil için çok bağlayabilirsiniz. Ya da aşağıdaki çalışması gerekir:

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

ya da:

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