title: How can I put a <span> inside a <text text-anchor=..>
body: <p><a href="https://codepen.io/ClaireLarsen/pen/XmVyVX?depth=everything&amp;limit=all&amp;order=popularity&amp;page=4&amp;q=text&amp;show_forks=false" rel="nofollow noreferrer">This CodePen is an example</a></p>
  
  <p>My project generates different text coming from this span:</p>
  
  <pre><code>&lt;span id="model-selection-value"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Meaning, this is what I would like to acheive:</p>
  
  <p><strong>ORIGINAL</strong></p>
  
  <pre><code>&lt;svg viewBox="0 0 960 300"&gt;
          &lt;symbol id="s-text"&gt;
              &lt;text text-anchor="middle" x="50%" y="80%"&gt;Montserrat&lt;/text&gt;
          &lt;/symbol&gt;
  </code></pre>
  
  <p><strong>MY GOAL</strong></p>
  
  <pre><code>&lt;svg viewBox="0 0 960 300"&gt;
      &lt;symbol id="s-text"&gt;
          &lt;text text-anchor="middle" x="50%" y="80%"&gt;&lt;span id="model-selection-value"&gt;&lt;/span&gt;&lt;/text&gt;
      &lt;/symbol&gt;
  </code></pre>
  
  <p>But the code above only reads pure text, doesn't it? Any way around?</p>