Image Selector For SVGs-CodePudding

I have a drop down list which selects an image but I am trying to amend this for use with . The reason for this is that I was hoping to using SVGs as the results in the dropdown (they have embedded fonts etc so need to be objects). So far I have the below but cannot seem to figure out why this isn't working

<select onchange="document.getElementById('head-to-head-left').src = this.value">
  <option selected disabled>Pick a flower...</option>
  <option value="/seasons/2022/drivers/max_verstappen/head-to-head-left.svg">Max Verstappen</option>
  <option value="/seasons/2022/drivers/hamilton/head-to-head-left.svg">Lewis Hamilton</option>
  <option value="/seasons/2022/drivers/leclerc/head-to-head-left.svg">Charles Leclerc</option>
</select>
<br>
<object id="head-to-head-left" style="border: .2vw solid white;" type="image/svg xml" width="90%"></object><br>

I'm sure I'm missing something quite simple but any help would be great

CodePudding user response：

You should use document.getElementById('head-to-head-left').data because in <object> tag doesnt have src attribute