在svg图标中添加动态值(来自Angular)

Question

我有一个svg图标，我想在其中显示一个typescript变量的值。这个变量来自于api。这可能吗?

svg:<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"> <rect id="Rectangle_1674" data-name="Rectangle 1674" width="32" height="20" rx="10" fill="#0e70c7"/> </svg>

ts:this.countLife = this.filterLifePolicies.length;

html:<img class="ppp" id="what" src="../../assets/images/Component102_1.svg">

因此，我需要将countLife的内容传递到svg中

Answer 1

有可能。只需将SVG的代码粘贴到模板中，然后将组件数据绑定到SVG元素。

例如如何修改SVG的高度(以像素为单位):

<svg xmlns="http://www.w3.org/2000/svg" [attr.height.px]="heightInPixels"></svg>

注意heightInPixels是在组件类中定义的一个变量。

编辑:

如果你想将某个变量值显示为文本，请尝试使用Angular binginds将<text>节点添加到SVG中。

<text x="20" y="35" class="small">{{ myVariable}}</text>

请注意，x、y(或任何其他属性)可以像前面的[attr.x]等一样修改。