Variable text in SVG defined text tag

user_923315 0
Viewed 108

I would like to re-use def-ined shapes in SVG but with variable text. Is the following somehow possibel ?

<svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="shape">
      <rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" />
      <text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00">variable_text</text>
    </g>
  </defs>
   <g transform="translate(0 0)">
    <use xlink:href="#shape" text="test" />
  </g>
   <g transform="translate(100 0)">
    <use xlink:href="#shape" text="test2" />
  </g>
</svg>

EDIT: since the solution would probably involve some javascript I have added the tag.

svg javascript
1 Answers

Clone the template and adjust as necessary.

let shape = document.getElementById("shape");
Array.from(document.getElementsByTagName("use")).forEach((use) => {
    let text = use.getAttribute("text");
    let clone = shape.cloneNode(true);
    // might want to do something more robust here
    clone.children[1].textContent = text;
    use.parentNode.appendChild(clone);
    use.parentNode.removeChild(use);
  })
<svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="shape">
      <rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" />
      <text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00">variable_text</text>
    </g>
  </defs>
   <g transform="translate(0 0)">
    <use xlink:href="#shape" text="test" />
  </g>
   <g transform="translate(100 0)">
    <use xlink:href="#shape" text="test2" />
  </g>
</svg>

user_10380150
Related