modify stroke and fill of svg image with javascript

Question

I am trying to modify the stroke and fill of an .svg image. I have been getting some information from Is it possible to manipulate an SVG document embedded in an HTML doc with JavaScript?.

I used javascript to manipulate it, the javascript in the header:

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

the html:

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

Any help appreciated!

EDIT:1 I think the main problem here is how to display an svg image as an svg element, an actual image that instead of an ending like .png or .jpeg, uses an ending of .svg, and furthermore how the fill and stroke of it can then be manipulated!

Robert Longson · Accepted Answer · 2012-04-13T15:09:46.827

47

If you use an img tag then for security reasons you will not be able to access the DOM of the image data. The image is effectively the same as an animated bitmap as far as the container is concerned.

Using an <iframe> or <object> tag will allow you to manipulate the embedded object's DOM.

edited Apr 13 '12 at 15:09

answered Apr 13 '12 at 13:15

Robert Longson

118,664
26
252
242

6

+1 for being the only answer to understand the problem the OP is having. – Phrogz Apr 13 '12 at 15:06
1

Hey Robert, thanks for the response. I used an ` – Potney Switters Apr 16 '12 at 07:35
2

You want something like document.getElementById("svg_image_id").getSVGDocument().getElementById("circle_id").style.fill="blue"; – Robert Longson Apr 16 '12 at 08:55
This method doesn't work so well nowadays: https://stackoverflow.com/questions/22529398/getsvgdocument-returns-null-in-firefox-and-chrome – Kev Aug 14 '18 at 12:06
1

@kev Nowadays is no different. Cross site scripting has never been allowed. If you control both domains CORS enabling might help – Robert Longson Aug 14 '18 at 13:32

score 10 · Answer 2 · edited Apr 13 '12 at 12:01

I've already answered something like this before, save this snippet as an html file.

<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: To prove this function can be set in the head, here is a modified version:

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

Thanks Peter, I tried out your solution and it works fine for a circle, but when I try it out with the img attribute it doesn't work! — Potney Switters, Apr 13 '12 at 11:17
first try to replace my circle with the contents of the svg you want to use, if this works you should be able to embed the svg and change it in the same way, i think you can't use the img tag to do this — peter, Apr 13 '12 at 12:10

score 3 · Answer 3 · answered Apr 13 '12 at 11:01

3

I think you will need to modify the stroke of the individual element, not just the svg element itself. The svg will be composed of a tree of nodes, and it is these nodes which have the stroke attribute.

answered Apr 13 '12 at 11:01

Phil H

19,928
7
68
105

Hey Phil, it is an img element not an svg element, it it just that the image is an .svg file. – Potney Switters Apr 13 '12 at 11:24
1

Try changing it to an embed: http://www.w3schools.com/svg/svg_inhtml.asp then you should be able to manipulate it as part of the DOM. – Phil H Apr 13 '12 at 11:30
Thanks for the response Phil. I converted the image element to but the result is the same. – Potney Switters Apr 13 '12 at 11:37
Looks like it can only be modified if an actual svg tag, then. Can you include the contents of the svg inline in the html file? – Phil H Apr 13 '12 at 12:14
This is the inline stuff I am writing: ` ` – Potney Switters Apr 13 '12 at 12:21
Sorry, I mean actually serve the contents of the svg inline in the html file, not via an embed? – Phil H Apr 13 '12 at 12:29
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10044/discussion-between-potney-switters-and-phil-h) – Potney Switters Apr 13 '12 at 12:38

score 2 · Answer 4 · answered Dec 14 '16 at 14:33

I'm not sure if this has been resolved. I had experienced a similar scenario and the best way is to put the svg file in an <bject> tag and change the stroke property not fill property.

svgItem.style.stroke="lime";

Also you may refer to the section: Changing CSS Properties of SVG in this link

I had tested this and could change the stroke property. Please refer to this screnshot and below is the sample code which worked for me.

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";
};

John Leimon · Answer 5 · 2016-08-21T21:40:53.180

1

Here is a simple example that demonstrates modifying an attribute of an SVG HTML object using 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>

edited Aug 21 '16 at 21:40

answered Mar 20 '13 at 17:43

John Leimon

1,063
1
9
13

modify stroke and fill of svg image with javascript

5 Answers5

Linked