0

Let's say I have the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="40.723" height="35.1" viewBox="0 0 40.723 35.1">
  <defs>
    <style>.a{ fill:none;  stroke:#53247f; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.2px; } .b{ fill:#53247f; } .c{ fill:#fff; font-size:10px; font-family:Rubik; }</style>
  </defs>
  <g transform="translate(-79.277 -498.9)">
    <path class="a" d="M37.042,19.867a15.15,15.15,0,0,1-1.627,6.87,15.367,15.367,0,0,1-13.74,8.5,15.15,15.15,0,0,1-6.87-1.627L4.5,37.042l3.435-10.3a15.15,15.15,0,0,1-1.627-6.87,15.367,15.367,0,0,1,8.5-13.74A15.15,15.15,0,0,1,21.675,4.5h.9A15.331,15.331,0,0,1,37.042,18.963Z" transform="translate(75.877 495.5)"/>
    <circle class="b" cx="10" cy="10" r="10" transform="translate(100 514)"/>
    <text class="c" transform="translate(110 528)">
      <tspan x="-2.14" y="0">1</tspan>
    </text>
  </g>
</svg>

And I'd like to reference it (with <img src=""/>, for example, or any other possible way) instead of having it lying around, uglifying my code.

How would I then be able to dynamically change <tspan x="-2.14" y="0">1</tspan></text></g></svg> to <tspan x="-2.14" y="0">{{number}}</tspan></text></g></svg>?

Thanks

noamyg
  • 2,747
  • 1
  • 23
  • 44
  • 2
    You wouldn’t. Not when you embed it via `img`. You could get the SVG source (f.e. via an AJAX request), then manipulate data/elements in that string, and then assign the result as a Data URI again. – CBroe May 10 '21 at 10:55
  • You can't do it using svg inside img tag. – Omar May 10 '21 at 11:04
  • @OmarFaruque @CBroe thanks for the comments. Just to clarify, I'm not fixed on `` specifically. Just looking for a way not to have all the SVG code in my template. I have several "configurable" SVGs on one page, it makes everything looks so messy... – noamyg May 10 '21 at 11:30
  • There is a WebComponent with a ``loadSVG`` JavaSript function in this SO answer: https://stackoverflow.com/questions/66263255/how-to-make-an-svg-interactive-to-gather-comments-annotations-on-depicted-elemen Or a simple version here: https://stackoverflow.com/questions/67372939/how-to-get-svg-document-data-to-be-inserted-into-the-dom – Danny '365CSI' Engelman May 11 '21 at 07:12

0 Answers0