Les styles CSS peuvent-ils être appliqués aux SVG intégrés à l'aide de la balise `` ?

Application de styles CSS aux SVG intégrés

Lors de l'inclusion d'un SVG directement dans un document à l'aide de l'option

Réponse courte : Non

Les styles CSS ne peuvent pas traverser les limites du document, y compris celles entre le document principal et le SVG intégré.

Solutions alternatives

Puisqu'un balise est impliquée, vous pouvez insérer une feuille de style dans le document SVG en utilisant JavaScript. Voici un exemple (en supposant que l' soit entièrement chargé) :

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // style as desired
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

De plus, vous pouvez insérer un élément vers une feuille de style externe :

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

Lien direct

Vous pouvez également créer un lien vers la feuille de style directement à partir du fichier SVG, sans script :

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

Option supplémentaire : Plugin JQuery-SVG

Comme de 2015, vous pouvez appliquer des scripts JS et des styles CSS aux SVG intégrés à l'aide du plugin jquery-svg.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!