How to Amend an image tag in an SVG tag using Javascript?

Question

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?

Answer 1

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