How do I <use> a named <tspan> element in an SVG document?

user_12305828 0
Viewed 38

I'm trying to define a tspan early in an SVG document so it can be transcluded later inside a text. At least in Firefox, the following code does not produce this result.

<svg version="1.1" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <tspan id="transcluded-text">This is a text</tspan>
    </defs>
    <text>
        <use href="#transcluded-text"/>
    </text>
</svg>

Using Firefox's Inspect tool, the use element contains a shadow DOM (#shadow-root) as expected, but the shadow DOM itself is empty.

Without using Javascript, is it possible to transclude a tspan inside a text like this?

svg
2 Answers

The text element can only contain text content child elements (so, not <use>) and the only text related element the defs element can contain is <text>. So, it all points to that the <tspan> cannot be used in this way.

<svg version="1.1" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <text x="10" y="20" font-size="20" id="transcluded-text">This is a text</text>
  </defs>
  <use href="#transcluded-text"/>
</svg>

user_3220840

Since you can not use <use> elements within a <text> element;
or a bare <tspan> within <defs>

A modern Native Web Component can do the replace job:

(this will cause a FOUC you might want to deal with)

<script>
  customElements.define("svg-use-replacer", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // make sure SVG is parsed
        this.querySelectorAll('use').forEach(use => {
          let href  = use.getAttribute("href");
          let tspan = this.querySelector(href);
          use.replaceWith(tspan); // .replaceWith was not available in IE
        });
        // if the bare <svg> is required in the DOM:
        // this.replaceWith(this.querySelector("svg"));
      });
    }
  });
</script>

<svg-use-replacer>
  <svg version="1.1" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <tspan id="foo" stroke="green">Wonderful</tspan>
    </defs>
    <text x="10" y="20" font-size="20">
      Hello
      <use href="#foo" /> Web Component
    </text>
  </svg>
</svg-use-replacer>

Notes

  • The oldskool way is to attach a class and after that Element is parsed run JavaScript on it.

  • With Web Components it totally does not matter WHEN the Web Component is defined.
    You can execute the above script any time you want.

user_25208000
Related