Vraag Hoe een stijl toepassen op een ingesloten SVG?


Wanneer een SVG rechtstreeks in een document wordt opgenomen met behulp van de <svg> tag, kunt u CSS-stijlen toepassen op de SVG via de stylesheet van het document. Ik probeer echter een stijl toe te passen op een SVG die is ingesloten (met behulp van de <object> label).

Is het mogelijk om iets te gebruiken zoals de volgende code?

object svg { 
    fill: #fff; 
}

97
2018-02-05 09:44


oorsprong


antwoorden:


Kort antwoord: nee, omdat stijlen niet van toepassing zijn op documentgrenzen.

Omdat u echter een <object> tag kunt u de stylesheet invoegen in het svg-document met behulp van het script.

Zoiets als dit, en merk op dat deze code veronderstelt dat het <object> is volledig geladen:

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

Het is ook mogelijk om een ​​invoegtoepassing in te voegen <link> element om naar een externe stylesheet te verwijzen:

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

Nog een andere optie is om de eerste methode te gebruiken, om een ​​stijlelement in te voegen, en dan een @import-regel toe te voegen, bijv styleElement.textContent = "@import url(my-style.css)".

Natuurlijk kunt u ook rechtstreeks vanuit het svg-bestand naar de stylesheet linken, zonder scripting. Een van de volgende zaken zou moeten werken:

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

of:

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

Update 2015: u kunt gebruiken jquery-svg plug-in voor het toepassen van js-scripts en css-stijlen op een ingesloten SVG.


103
2018-02-05 11:30



Je kunt dit doen zonder javsscrpt door een stijlblok met je stijlen in het SVG-bestand zelf te plaatsen.

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

8
2018-05-25 11:43