Given the following HTML code:

<div>
  <div class="eventMsg">
    <span class="logText playerName" style="color: rgb(153, 37, 31);">red</span>        
    <span class="logText"> built a </span>
    <svg height="20" width="20" overflow="visible">
      <use href="#settlement-def-red" style="transform: translate(13px, 11px) scale(0.06);"></use>
    </svg>
  </div>
</div>

I’m building a Chrome extension that takes data similar to the above to build a display in a side panel. I need to get to the words “settlement-def-red” in the svg->use tag so I know what the player built. I’m able to get the text “red built a” by using “.textContent on the element, but can’t get any deeper than that.

I’m working in Typescript, building with VS Code, but I can’t find the right code to get to that line and extract the “href” text. Any ideas? -Thanks!