0

假设我有以下 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>

而且我想引用它（<img src=""/>例如，或任何其他可能的方式）而不是让它到处乱放，丑化我的代码。

然后我将如何能够动态更改<tspan x="-2.14" y="0">1</tspan></text></g></svg>为<tspan x="-2.14" y="0">{{number}}</tspan></text></g></svg>？

谢谢

4

0 回答 0