2

I have a bit of an odd issue, and maybe it's simple for someone to explain why it's happening. Anytime I insert HTML using the code below, I inspect the browser and the browser says something different from what I insert. I'm trying to insert into my SVG on the page, but the browser is showing which is not proper SVG syntax, thus causing an issue.

jQuery('<defs><pattern><image xlink:href="link-to-image.jpg"></image></pattern>').insertBefore("svg > g:first-of-type");

Happens the same with straight up Javascript:

document.getElementById("desc").innerHTML = "<image src='test'></image>";

And this is how it outputs in the DOM:

<defs>
    <pattern class="customBG" id="p-TAKE" width="1" height="1" viewbox="0 0 100 100" preserveaspectratio="none">
        <img xlink:href="https://matchkicks.com/wp-content/uploads/2020/08/Hd-Wallpapers-Tie-Dye-Peace-1000-X-1000-215-Kb-Jpeg-HD-Wallpapers.jpg" width="100" height="100" preserveaspectratio="none" />
    </pattern>
</defs>
Kody
  • 752
  • 2
  • 11
  • 22
  • @Barmar they are in an svg context... – Kaiido Sep 23 '20 at 02:12
  • The problem is that jQuery is parsing the HTML into DOM elements *before* it inserts it. Since it's not in an SVG context at that point, it treats the `` element as it would in normal HTML. – Barmar Sep 23 '20 at 02:14

0 Answers0