Discussion :

[Toiine]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
 
<!-- Généré par Microsoft Visio 11.0, SVG Export, v1.0 A_GLO_AFfr.svg Page-1 -->
<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

pour qu'elle devienne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.querySelector("#svgElement").contentDocument.firstChild
document.querySelector("#svgElement").contentDocument.documentElement

Sont respectivelment les balises <!DOCTYPE> et <svg>

[sekaijin]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Toiine]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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