svg or javascript to replace url part of use

Question

I have some:

<svg class="image image-size-09em" role="img" area-hidden="true">
  <use href="_content/blazor/blazor.svg#chevron-right"></use>
</svg>

I want to replace chevron-right with chevron-left for all svgs in the page. How is it possible?

Answer 1

Use querySelectorAll to select all the relevant elements, then change all of their hrefs

 document.querySelectorAll("use").forEach(element=>{ element.href.baseVal = element.href.baseVal.replace("chevron-right", "chevron-left") })

 <svg class="image image-size-09em" role="img" area-hidden="true"> <use href="_content/blazor/blazor.svg#chevron-right"></use> </svg>