如何在Angular中将typescript动态变量值传入svg图标展示

这个需求完全可以实现，你当前用<img>标签引入外部SVG的方式无法直接绑定变量，因为作为独立资源加载的SVG和页面上下文是隔离的，无法直接读取页面的TS变量值，改用内联SVG的方式即可快速实现：

步骤1：替换img标签为内联SVG #

直接把你的SVG代码复制到HTML模板中，同时添加<text>节点用于展示数值，调整文字样式让其在标签中居中：

<svg id="Component_102_1" data-name="Component 102 – 1" xmlns="http://www.w3.org/2000/svg" width="32" height="20" viewBox="0 0 32 20" class="ppp" id="what">
  <rect id="Rectangle_1674" data-name="Rectangle 1674" width="32" height="20" rx="10" fill="#0e70c7"/>
  <!-- 绑定countLife变量，文字默认白色、12号、水平垂直居中 -->
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="12">
    {{ countLife }}
  </text>
</svg>

如果你用的是React框架，把变量绑定语法替换为{this.countLife}即可。

步骤2：变量更新自动同步 #

你原本的TS代码不需要做任何修改，当this.countLife的值从API接口获取更新后，SVG中的文字会自动跟随框架的响应式更新逻辑同步修改，不需要额外操作。

可选方案（保留外部SVG文件的场景） #

如果你必须保留单独的SVG文件不做内联，可以通过JS请求SVG文件内容，手动注入文字节点后再插入到页面DOM中，实现逻辑如下：

async function loadSvgWithCount() {
  const res = await fetch('../../assets/images/Component102_1.svg')
  let svgText = await res.text()
  // 插入text节点到svg内容中
  svgText = svgText.replace('</svg>', `<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="12">${this.countLife}</text></svg>`)
  document.getElementById('what').outerHTML = svgText
}

该方案需要在countLife每次更新时重新调用方法渲染，灵活度低于内联方案，优先推荐使用内联方案。

内容的提问来源于stack exchange，提问作者Andreas V