SVG <use> call being blocked by JS

[mhomolak]

I am trying to use a custom svg and am having mixed success or none at all when injecting it into the template. I have used these in other JS applications without issues.

<button class="o-dropdown-menu__menu-close">
  <svg role="img"
      aria-labelledby="r2"
      focusable="false"
      class="my-icon">
    <title id="r2">Close dropdown menu</title>
    <use xlink:href="#my-icon"></use>
  </svg>
</button>`

When using xlink:href the SVG does not render at all and after investigation it appears as if the use call is being blocked. If I removed the xlink: and solely use href the svg renders in every browser but Safari.

Hoping you might be able to provide some insight.

[davidjamesstone]

I can't look at this at the moment and I haven't used SVG with incremental-dom much so I don't have a lot of experience.

Do any of these issues help?

You code looks fine to me - I might be able to take a look at it this weekend.

Thanks

Dave

[mhomolak]

The second issue did help. It looks like a year and a half ago they added SVG support but not full SVG support. I'm not seeing the xlink:href attribute handled in their pull request which explains why it's not rendering for me. Thanks for your assistance!

Mike