How to change fill color SVG object for specific path id via AngularJS

Question

svg:

  <path id="svg_1" stroke-width="0.5" 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-width="0.5" 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-width="0.5" stroke="black" fill="none" d="m66.519997,275.440002l-3.039997,0"/>

html:

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

I would like to change fill color for id="svg_2" for example on button click, How to do it?

Answer 1

The problem are your paths. After every line you are using a move to command ( m ) where you are moving to the last point. I've rewritten the first 2 paths bu removing the move to ( m0,0 ) Now the paths can be filled. The third path is just a line.

Now you can fill the paths using css or bu resetting the value of the attribute fill

 path{fill:red}

 <svg viewBox="0 0 130 600" width="100"> <path id="svg_1" stroke-width="0.5" 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-width="0.5" 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-width="0.5" stroke="black" fill="none" d="m66.519997,275.440002l-3.039997,0"/> </svg>