Changer la balise xml d'un fichie svg

Version imprimable

Bonjour,

si j'ai des fichiers SVG commençant comme ceci :
Code:

1 2 3 4 5 6 7 8 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="11.6929in" height="8.26772in" viewBox="0 0 841.89 595.276" xml:space="preserve" color-interpolation-filters="sRGB" class="st24"> 
Est il possible de modifier ma première ligne

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

pour qu'elle devienne :

Code:

<?xml-stylesheet version="1.0" encoding="UTF-8" standalone="no" type="text/css" href="../../style/css/customSVG.css"?>

ou alors d'insérer cette nouvelle ligne après la première ?

J'affiche et j'accède à mon SVG via un <object> dans ma page html.
Code:

1 2 document.querySelector("#svgElement").contentDocument.firstChild document.querySelector("#svgElement").contentDocument.documentElement
Sont respectivelment les balises <!DOCTYPE> et <svg>

NON
le préambule d'un document XML HTML SGML ne fait pas partit du document ce n'est pas un élément.

un fois le document lu et le dom instancié il est trop tard.

Par contre une foit ton dom instancié tu peux lui insérer un DOMElement Style

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>  
  <defs>
    <style type="text/css">
      <![CDATA[
        @font-face {
          font-family: 'Super Sans'; 
          font-weight: normal;
          font-style: italic;
          src: url("myfont.svg#Font2") format("svg")
        }
      ]]>
   </style>
  </defs>
  <text x="100" y="100"
           style="font-family: 'Super Sans'; font-weight:normal;
                  font-style: italic">Text using referenced font</text>
</svg>

Code:

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>  
  <defs>
    <style type="text/css" src="../../style/css/customSVG.css"></style>
  </defs>
  <text x="100" y="100"
           style="font-family: 'Super Sans'; font-weight:normal;
                  font-style: italic">Text using referenced font</text>
</svg>

A+JYT

Oui, en fait j'avais déjà quelque chose du genre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 function getCDATA(nodelist) { for (var i = 0; i < nodelist.length; i++) { var node = nodelist.item(i); if (node.nodeType == Element.CDATA_SECTION_NODE) { return node; } } return null; } /* ...*/ // Apply my own style to SVG (TODO : need to fix 2 click instantiation first) var style = document.querySelector(elementOrSelector).contentDocument.querySelector("style"); var cdata = getCDATA(style.childNodes); console.log("cdata = " + cdata); if (cdata != null) var styleContent = cdata.nodeValue; if (styleContent.indexOf("rect:hover") < 0) styleContent += "\n\t\trect:hover {stroke: #698B89;stroke-width: 4}\n"; if (styleContent != null) cdata.textContent = styleContent; // Removing <title> so we don't have tooltip like 'rectangle', 'feuille', etc... var elements = document.querySelector(elementOrSelector).contentDocument.getElementsByTagName("title"); for (i = elements.length - 1; i >= 0; i--) { elements[i].parentNode.removeChild(elements[i]); }
Le problème c'est que sous chrome, après quelques changement de SVG, ma variable cdata est tronquée, la partie que j'ajoute s'insère en plein milieu du cdata, au lieu d'aller s'ajouter à la fin. C'est peut-être du au fait que en l’occurrence dans ces exemples le cdata est de taille égale entre mes fichiers.

Aussi, il faut cliquer 2 fois sur les éléments du menu pour changer de SVG au lieu d'une seule.
Je suspecte un problème d'instantiation de svgpanzoom que j'utilise, peut être lié à Angular : scope mis à jour mais pas vue.

Voici un plunker avec plus de sources (plus d'info en console), mais j'ai pas réussi à reproduire le même comportement, aussi, en local est en ligne via le plunker, le comportement diffère...
http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview

L'instantiation et l'ajout du code cité ci-dessus se fait ligne 1480 du fichier svg-pan-zoom.js