How would you go about amending an image tag within an SVG using Javascript?
So I have an image stored in a SVG, like so:
<svg height="666px" width="666px" viewBox="0 0 600 600">
<image id="changingImage" href="phone.png" x="69.0802" y="344.9714" height="28" width="28"></image>
</svg>
So the suggestion I got from online and tried in my script was grabbing the ID and updating the source like so:
document.getElementById("changingImage").src = "phone2.png";
That didn't work, so I thought about it a bit and realized that the image tags in SVG don't use SRC, they use HREF. So I tried the following, but it still didn't work:
document.getElementById("changingImage").href = "phone2.png";
Anyone know how to amend images within an SVG using javascript, or got any ideas about what I could try?
I'd like to post the answer with the syntax for anyone who might have the same problem. The suggestion from user @enxaneta worked, using setAttribute. Here's the syntax based on the example above.
document.getElementById("changingImage").setAttribute("href", "phone2.png");