title: change the xlink:href of an <image> in a svg, through a classic <a> link
body: <p>I have an SVG in my webpage (I use PHP):</p>
  <pre><code>&lt;svg width=&quot;500px&quot; height=&quot;500px&quot; xml:lang=&quot;fr&quot;
  xmlns=&quot;http://www.w3.org/2000/svg&quot;
  xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
  &lt;image width=&quot;500&quot; height=&quot;500&quot; xlink:href=&quot;img1.jpg&quot; opacity=&quot;0.35&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>I would like to be able to change the <code>xlink:href</code> variable when clicking on a link (and without reload the webpage), something like:</p>
  <pre><code>&lt;a href=#&quot; onclick=&quot;changexlinkhref(img2.jpg)&quot;&gt;change with img2&lt;/a&gt;
  </code></pre>
  <p>However, I wonder what would be the code of the JavaScript function <code>changexlinkhref(img){}</code>?</p>
  <p>For now, I do not use JQuery on my project.</p>
  <p>Thanks!</p>