<template> in <svg> can not be handled correctly

[lovetingyuan]

<svg viewBox="-50 -50 100 100">
    <template x-for="i in 12">
        <line class="major" y1="35" y2="45" :transform="`rotate(${30 * i * 5})`" />
    </template>
</svg>

Alpine Expression Error: Failed to execute 'importNode' on 'Document': parameter 1 is not of type 'Node'.

[ekwoka]

Line elements are nodes.

I'd suspect that since the line element can't actually exist alone, something else is being found first.

[lovetingyuan]

template element in svg will be treated as normal svg element instead of HTMLTemplateElement

[ika-musuko]

Adding this snippet in your code should make template directives work correctly inside of svg elements

    document.addEventListener("DOMContentLoaded", function() {
      var templates = document.querySelectorAll('svg template');
      var el, template, attribs, attrib, count, child, content;
      for (var i=0; i<templates.length; i++) {
        el = templates[i];
        template = el.ownerDocument.createElement('template');
        el.parentNode.insertBefore(template, el);
        attribs = el.attributes;
        count = attribs.length;
        while (count-- > 0) {
          attrib = attribs[count];
          template.setAttribute(attrib.name, attrib.value);
          el.removeAttribute(attrib.name);
        }
        el.parentNode.removeChild(el);
        content = template.content;
        while ((child = el.firstChild)) {
          content.appendChild(child);
        }
      }
    });

Adapted from #637 (comment)

[ekwoka]

oh no.

document.addEventListener("DOMContentLoaded", () => {
      document.querySelectorAll('svg template').forEach(el => {
        const template = el.ownerDocument.createElement('template');
        for (const attr of el.attributes) 
          template.setAttributeNode(attr.cloneNode())
        template.content.append(...el.children)
        el.replaceWith(template)
      })
    });