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 wi

Answer 1

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