带有自定义输入的角度 SVG答案

【问题标题】：SVG in angular with custom inputs带有自定义输入的角度 SVG
【发布时间】：2021-06-12 22:52:28
【问题描述】：

我在我的组件中接收到一个参数，我知道对于 cx cy 等我需要前缀 attr 但对于 stroke-width stroke-dasharray 当我尝试放置从我的组件发送的值时，例如我的情况 {{ dashArray}} 我得到 Can't bind to 'stroke-dasharray' 因为它不是 ':svg:circle' 的已知属性。 这是正常的原因不是。我怎样才能解决这个问题？直接输入值是可行的，但我需要在将组件发送到 html 之前对其进行一些计算。

  <circle
    class="gauge_base"
    attr.cx="{{radius}}"
    attr.cy="{{radius}}"
    stroke="gray"
    attr.r="{{innerRadius}}"
    stroke-width="{{strokeWidth}}"
    transform=""
    stroke-linecap="round"
    fill="transparent"
    stroke-dasharray="{{dashArray}}"
  />

【问题讨论】：

我在下面给出的解决方案有效吗？
是的，接受了，谢谢，没注意到没有在那里添加 attr。

标签： angular svg

【解决方案1】：

您需要进行以下更改。

<svg height="100" width="100">
  <circle
    class="gauge_base"
    attr.cx="{{radius}}"
    attr.cy="{{radius}}"
    stroke="gray"
    attr.r="{{innerRadius}}"
    attr.stroke-width="{{strokeWidth}}"
    transform=""
    stroke-linecap="round"
    fill="transparent"
    attr.stroke-dasharray="{{dashArray}}"
  />
</svg>

【讨论】：