web-dev-qa-db-fra.com

modifier le trait et le remplissage de l'image svg avec javascript

J'essaie de modifier le trait et le remplissage d'une image .svg . Je reçois des informations de Est-il possible de manipuler un document SVG incorporé dans une doc HTML avec JavaScript? .

J'ai utilisé javascript pour le manipuler, le javascript dans l'en-tête:

function svgMod(){
    var s = document.getElementById("svg_img");
    s.setAttribute("stroke","0000FF");
}

le html:

...
<body onload="svgMod();">
<img id="svg_img" src="image.svg">  
...

Toute aide appréciée!

EDIT: 1 Je pense que le problème principal ici est comment afficher une image svg en tant qu'élément svg}, une image réelle qui, au lieu d'une fin comme .png ou .jpeg, utilise une fin. svg, et comment le remplissage et le trait peuvent ensuite être manipulés! 

javascripthtmlsvg
23
Potney Switters

Si vous utilisez une balise img, pour des raisons de sécurité, vous ne pourrez pas accéder au DOM des données de l'image. En réalité, l’image est identique à une image bitmap animée en ce qui concerne le conteneur.

L'utilisation d'une balise <iframe> ou <object> vous permettra de manipuler le DOM de l'objet incorporé.

35
Robert Longson

J'ai déjà répondu à quelque chose comme ça avant, sauvegardez cet extrait en tant que fichier html.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
<circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
<button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>

EDIT: Pour prouver que cette fonction peut être configurée en tête, voici une version modifiée:

<html>
  <head>
  <script>
    function svgMod(){ 
      var circle1 = document.getElementById("circle1"); 
      circle1.style.fill="blue";
    } 
  </script>
  </head>
  <body>
  <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
  <circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
  </svg>
  <button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>
  <button onclick=jacascript:svgMod();>Click to change to blue</button>
  </body>

</html>
7
peter

Je pense que vous aurez besoin de modifier le trait de l'élément individuel, pas seulement l'élément svg lui-même. Le svg sera composé d'un arbre de nœuds, et ce sont ces nœuds qui ont l'attribut stroke.

2
Phil H

Voici un exemple simple illustrant la modification d'un attribut d'un objet HTML SVG à l'aide de javascript:

<html>
  <body>
    <svg>
      <rect id="A1" x="10" y="10" width="25" height="25" fill="red" />
    </svg>
  </body>

  <script>
    alert("Acknowledge to modify object color.");
    var object = document.getElementById("A1");
    object.setAttribute("fill", "green");
  </script>
</html>
1
evilspacepirate

Je ne sais pas si cela a été résolu. J'avais vécu un scénario similaire et le meilleur moyen est de placer le fichier svg dans une balise <bject> et de modifier la propriété de trait, mais pas la propriété de remplissage. 

svgItem.style.stroke="Lime";

Vous pouvez également vous reporter à la section: Modification des propriétés CSS de SVG dans ce link

J'avais testé cela et pouvais changer la propriété de trait. S'il vous plaît se référer à ce screnshot et ci-dessous est l'exemple de code qui a fonctionné pour moi.

window.onload=function() {
	// Get the Object by ID
	var a = document.getElementById("svgObject");
	// Get the SVG document inside the Object tag
	var svgDoc = a.contentDocument;
	// Get one of the SVG items by ID;
	var svgItem = svgDoc.getElementById("pin1");
	// Set the colour to something else
	svgItem.style.stroke ="Lime";
};

0
Arun