如何通过AngularJS更改特定路径ID的填充颜色SVG对象

Posted 2023-03-28

【中文标题】如何通过AngularJS更改特定路径ID的填充颜色SVG对象

【英文标题】：How to change fill color SVG object for specific path id via AngularJS

【发布时间】：2020-09-21 19:20:16

【问题描述】：

svg:

  <path id="svg_1" stroke- stroke="black" fill="none" d="m50.610001,63.470001l12.869999,0m0,0l0,464.709991m0,0l-12.869999,0m0,0l0,-464.709991"/>
  <path id="svg_2" stroke- stroke="black" fill="none" d="m66.529999,260.670013l12.870003,0m0,0l-0.029999,267.519989m0,0l-12.870003,0m0,0l0.029999,-267.519989"/>
  <path id="svg_3" stroke- stroke="black" fill="none" d="m66.519997,275.440002l-3.039997,0"/>

html:

<div ng-include="'example.svg'"></div>

我想更改 id="svg_2" 的填充颜色，例如在单击按钮时，怎么做？

【问题讨论】：

请展示演示您的问题的演示。你可以抓住这个 plunker：plnkr.co/edit/77oUelWE5fS6IxzdqB3H?p=preview&preview

【参考方案1】：

问题是你的路径。在每一行之后，您都在使用移动到命令 (m)，您将在该命令中移动到最后一点。我已经重写了前 2 条路径，但删除了移动到 (m0,0) 现在可以填充路径。第三条路径只是一条线。

现在您可以使用 css 或 bu 重置属性 fill 的值来填充路径

pathfill:red

<svg viewBox="0 0 130 600" >
<path id="svg_1" stroke- stroke="black" fill="none" d="M50.610001,63.470001l12.869999,0
   l0,464.709991
   l-12.869999,0
   l0,-464.709991"/>
  <path id="svg_2" stroke- stroke="black" fill="none" d="M66.529999,260.670013l12.870003,0
   l-0.029999,267.519989
   l-12.870003,0
   l0.029999,-267.519989"/>
  <path id="svg_3" stroke- stroke="black" fill="none" d="m66.519997,275.440002l-3.039997,0"/>
</svg>

【讨论】：

我不需要填写所有路径，只需要填写路径“svg_2”

在这种情况下，您可以只选择第二条路径并填充它。您遇到的问题是您编码路径的方式。你需要解决这个问题。然后填写您需要的任何内容。