Menu
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!
314
To change SVG image color with JavaScript, we can set the fill attribute value. const svgElement = document. getElementById("svg"); svgElement.
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.
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.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
