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?

score 1 · Accepted Answer · edited Sep 04 '22 at 04:33

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>

edited Sep 04 '22 at 04:33

Nick

answered Sep 04 '22 at 04:29

Richard Henage

thanks , Is there a way to do the same with css? – Behdad Sep 04 '22 at 05:23
No, CSS is display-only, like this answer says https://stackoverflow.com/a/15356777/16634738 – Richard Henage Sep 04 '22 at 05:29

1 Answers1