3
<tr valign=top ng-repeat="program in programs" class=titles>
    <td>{{program.ProgramName}}</td> 
    <td ng-repeat="node in program.SourceNodes" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"><img ng-src={{node.Image}} ng-init={{node.Image}}> 
       <span ng-show="hoverEdit" class="animate-show">
          {{node.Name}} 
        </span>
    </td>
    <td style=stroke:yellow; ng-repeat="node in program.CaptureNodes"><img ng-src={{node.Image}}></td> 
    <td ng-repeat="node in program.CloudNodes"><img ng-src={{node.Image}} ng-style="{'stroke': red,'fill':red}" ></td> 
    <td ng-repeat="node in program.PrepNodes"><img ng-src={{node.Image}}></td>
    <td ng-repeat="node in program.DeliveryNodes"><img ng-src={{node.Image}} ></td> 
    <td></td>  
  </tr>

program is the JSON object that Contains a list of CloudNodes, PrepNodes, DeliverNodes. Each Node has a relative Image URL, a Color, and a few other feilds.

How can I set the color of the SVG contained in the Image field of the Node object?

onewaytofindout
  • 167
  • 1
  • 11
  • I don't know if it's any help, but can you put quotes around 'red' ? – Greg May 02 '16 at 13:42
  • I just tried that, it did not work. – onewaytofindout May 02 '16 at 14:00
  • You cannot set the colour, stroke or fill of an image, you should instead use inline SVG's. Although this answer may not help you resolve your problem, it may give you some insight as to how you should address it: http://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color – Iain J. Reid May 02 '16 at 18:15
  • Also be careful I noticed a huge performance penalty when I had too many svg images on a page. – Vince May 02 '16 at 20:18
  • I see the answer given by Praveen Kumar. How can I do this so that it can change the svg files into inline after the DOM from the AngularJS view is loaded. – onewaytofindout May 02 '16 at 20:48

0 Answers0