Dynamically change a style attribute (like fill color) - bartbutenaers/node-red-contrib-ui-svg GitHub Wiki

There are two ways to change some style attributes in SVG, which is quite confusing. For example let's specify the fill color:

  • As an SVG "fill" attribute: 
    <circle fill="#00ff00"/>
  • As a CSS style "fill" attribute: 
    <circle style="fill:#00ff00;"/>

The CSS style attribute is advised, and it has higher priority than the SVG attribute value!

In the following example flow both ways of working are demonstrated, to change the fill color of a fontawesome camera icon (with id "cam_living_room"):

fill_color_demo

[{"id":"8f0e54d7.4d1668","type":"ui_svg_graphics","z":"d9a54719.b13a88","group":"8d3148e0.0eee88","order":1,"width":"14","height":"10","svgString":"<svg preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 0 900 710\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <image width=\"889\" height=\"703\" id=\"background\" xlink:href=\"https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg\" />\n  <circle id=\"pir_living\" cx=\"310\" cy=\"45\" r=\"5\" stroke-width=\"0\" fill=\"#FF0000\" />\n  <text id=\"cam_living_room\" x=\"310\" y=\"45\" font-family=\"FontAwesome\" fill=\"green\" stroke=\"green\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\"></text>\n</svg> ","clickableShapes":[{"targetId":"#cam_living_room","action":"click","payload":"camera_living","payloadType":"str","topic":"camera_living"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":560,"y":500,"wires":[[]]},{"id":"588ccdd4.5ad384","type":"inject","z":"d9a54719.b13a88","name":"fill with red","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#cam_living_room\",\"attributeName\":\"fill\",\"attributeValue\":\"red\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":320,"y":500,"wires":[["8f0e54d7.4d1668"]]},{"id":"3272d837.2122e8","type":"inject","z":"d9a54719.b13a88","name":"fill with blue","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#cam_living_room\",\"attributeName\":\"fill\",\"attributeValue\":\"blue\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":330,"y":540,"wires":[["8f0e54d7.4d1668"]]},{"id":"8d3148e0.0eee88","type":"ui_group","z":"","name":"Floorplan test","tab":"93e19e4f.b80ed","disp":true,"width":"14","collapse":false},{"id":"93e19e4f.b80ed","type":"ui_tab","z":"","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]

Watch out: (as you can see in the animation) as soon as the CSS style attributes have been applied, the SVG attribute values won't be displayed anymore (due to their lower priority)!

The following messages will be injected, to achieve both mechanisms:

  • An SVG attribute value: 
    {
   "command": "set_attribute",
   "selector": "#cam_living_room",
   "attributeName": "fill",
   "attributeValue": "yellow"
}
  • A CSS style attribute value: 
    {
   "command": "update_style",
   "selector": "#cam_living_room",
   "attributeName": "fill",
   "attributeValue": "red"
}
⚠️ **GitHub.com Fallback** ⚠️