search

bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
93 stars 27 forks source link

Changing attributes in complex SVG files is a problem #57

Closed metcalfepete closed 4 years ago

metcalfepete commented 4 years ago

Hi,

First I've got to say that you've made an awesome component. Excellent work.

I'm finding that when I use simple SVG files everything is good. However when I start to use more complex files things start to break. Attached is my SVG file.

solarpanels.svg.zip

I find that I can change attributes in a standalone HTML/Javascript file.

solarpanels.htm.zip

In NodeRed I'm able to change the colour of a text item. I've tried both the "Input Bind" approach and Javascript. The function node code below works:

msg.payload = { "command": "update_attribute", "selector": "#panels", "attributeName": "fill", "attributeValue": "orange" } msg.topic= "update_attribute";

//msg.topic = "databind";

return msg;

But I'm unable to change the "panels" item in NodeRed, with similar code:

msg.payload = { "command": "update_attribute", "selector": "#panels", "attributeName": "fill", "attributeValue": "orange" } msg.topic= "update_attribute";

//msg.topic = "databind";

return msg;

FYI: My goal is to use MQTT devices send IoT info NodeRed with SVG graphics

nodered_svg

Again thanks for all the great work that you've done on the SVG node.

Cheers Pete

Steve-Mcl commented 4 years ago

Hi Pete. you're welcome.

Bart and I spent many many hours making this node a reality.

Question, have you tried manually changing the fill of the #panels in the Devtools?

It may be that there is an overriding style or class that is preventing the DOM showing your animation.

As a test, you could try setting up a couple of CSS classes .orange-panel and .green-panel then try animating the class?

bartbutenaers commented 4 years ago

Hello @metcalfepete,

Thanks for the constructive feedback!

In our wiki you can find a tutorial about setting styles (e.g. fill). When I change your function code to this:

msg.payload = {
"command": "update_style",
"selector": "#panels",
"attributeName": "fill",
"attributeValue": "orange"
}

return msg;

Then you will see it works:

svg_fill_style

Here is the entire flow:

[{"id":"7bfe8fa1.78341","type":"ui_svg_graphics","z":"1fbbbe5c.b86de2","group":"df5f317f.eb69","order":0,"width":"6","height":"19","svgString":"<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\"><desc>Copyright Opto 22</desc> <svg><g>\n<g id=\"shape\">\n\t<path id=\"panels\" fill=\"MidnightBlue\" d=\"M100,33.4l-24.1-3.3l-7,11.3l-1-0.2l7-11.3l-0.7-0.1L51,26.6l-7.1,10.9l-1.1-0.2l7.1-10.9l-0.7-0.1L25.1,23\n\t\tl-7.2,10.5l-1,1.4l11,1.7v1.1l-11.7-1.8L8.8,46.7l-0.3,0.4L25.7,50v0.7L25.1,51L7.8,48.1l-7.9,11.5l8.2,1.5L6.7,62l-4.8-0.9\n\t\tl0.9,1.3v0.9l-0.9,0.9L77,77.7l0.6-1v-0.9l-0.444-0.698l0.719-1.235L95.3,62.5l3.7,0.6V60l-1.454-0.273L97.4,59.8l-1.9-0.3V43.622\n\t\tL100,35.9V33.4L100,33.4z M92.3,46.5l0.2-0.4l0.9-1.6v0.226l-7.687,13.191L85.6,57.9l6-10.4l-24.3-3.7L61,54l-1-0.2l6.9-11.2\n\t\tL92.3,46.5z M76.7,73.3L83.9,61l-24.42-4.087L59.5,56.9l24.548,3.876L76.78,73.248L76.7,73.3z M65.3,42.4l-0.6,1L42.3,40l-6.5,10\n\t\tl-1-0.2l7.1-11L65.3,42.4z M30,37l10.2,1.6l-0.7,1L30,38.1V37z M39.1,68.1L8.6,62.4l1.4-0.8l14.6,2.7l0.6,0.1l7.6-11.7l1,0.2\n\t\tl-7.6,11.8l14.2,2.6L39.1,68.1z M75,74.5l-33.9-6.1l1.3-0.8l7.8,1.4l0.7,0.1l6.8-11l1.63-1.087L51.8,69.2l24.4,4.5L75,74.5z\n\t\t M79.118,71.735l6.263-10.749L93.7,62.3L79.118,71.735z M93.4,59.1l-6.35-0.977l6.35-10.897V59.1z M95.5,41.122V41.1l4.488-7.679\n\t\tL95.5,41.122z\"></path>\n</g>\n<g id=\"dark\">\n\t<polygon fill=\"#666\" points=\"30,37 28,36.7 28,37.8 30,38.1 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"28.6,36.3 28,36.2 28,36.2 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"76.4,76.4 100,35.9 100,33.4 76.4,73.9 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"33.3,50.9 25.8,49.7 25.8,49.7 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"25.2,51.1 31.3,52.2 32,51.2 25.8,50.1 25.8,50.8 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"35.7,50.2 35.8,50 34.8,49.8 34.6,50 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"60.9,54.5 61.2,54 60.2,53.9 59.9,54.3 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"34.1,52.6 54.2,56 56.7,56.4 57.3,55.4 33.7,51.5 32.9,52.6 34,52.8 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"97.6,59.8 97.6,59.7 97.4,59.8 95.5,59.5 95.5,41.1 93.5,44.5 93.5,59.1 85.7,57.9 84.7,59.6 \n\t\t60.3,55.5 84.7,59.6 84.5,60 59,55.7 57.6,58 59.5,56.9 93.6,62.3 76.7,73.3 76.5,73.7 76.2,73.7 75,74.5 41.1,68.3 42.4,67.5 \n\t\t40.5,67.2 39.2,68 8.6,62.4 10.1,61.6 8.2,61.2 6.8,62.1 2,61.2 2.9,62.5 2.9,63.4 2,64.3 77.1,77.8 77.8,76.8 77.8,75.9 \n\t\t77.1,74.8 76.9,74.8 95.5,62.6 99.2,63.2 99.2,60.1 \t\"></polygon>\n\t<path fill=\"#666\" d=\"M59.5,53.7l-0.9,1.5L59.5,53.7z\"></path>\n\t<polygon fill=\"#666\" points=\"17.8,36.3 18.5,35.3 17,35 16.3,36 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"7.9,48.2 9.4,48.5 10.1,47.5 8.6,47.3 8.9,46.8 8.9,46.8 16.1,36.2 0.1,59.6 0.1,59.6 \t\"></polygon>\n</g>\n<g id=\"light\">\n\t\n\t\t<rect x=\"17.113\" y=\"36.276\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 5.8372 -4.0161)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"17.881\" y=\"35.219\" transform=\"matrix(0.9888 0.1495 -0.1495 0.9888 5.6261 -4.1072)\" fill=\"#ccc\" width=\"24.502\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"18.699\" y=\"34.017\" transform=\"matrix(0.989 0.148 -0.148 0.989 5.3975 -4.2042)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"19.491\" y=\"32.778\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 5.1665 -4.2948)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"20.299\" y=\"31.678\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 4.9586 -4.376)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"21.121\" y=\"30.49\" transform=\"matrix(0.9896 0.1435 -0.1435 0.9896 4.742 -4.4644)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"21.884\" y=\"29.313\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 4.5289 -4.5414)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"22.689\" y=\"28.222\" transform=\"matrix(0.9901 0.1405 -0.1405 0.9901 4.3322 -4.6204)\" fill=\"#ccc\" width=\"24.4\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"23.483\" y=\"26.991\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 4.1184 -4.6894)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"24.297\" y=\"25.799\" transform=\"matrix(0.9905 0.1375 -0.1375 0.9905 3.9142 -4.765)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"25.095\" y=\"24.587\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 3.7103 -4.8355)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"8.869\" y=\"48.796\" transform=\"matrix(0.9862 0.1658 -0.1658 0.9862 8.3996 -2.8332)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"9.589\" y=\"47.673\" transform=\"matrix(0.9864 0.1643 -0.1643 0.9864 8.1466 -2.9472)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"10.374\" y=\"46.613\" transform=\"matrix(0.9867 0.1628 -0.1628 0.9867 7.907 -3.0682)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"11.094\" y=\"45.493\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 7.6606 -3.1764)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"11.831\" y=\"44.402\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 7.4218 -3.2842)\" fill=\"#ccc\" width=\"24.598\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"12.505\" y=\"43.315\" transform=\"matrix(0.9874 0.1583 -0.1583 0.9874 7.1853 -3.3792)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"13.202\" y=\"42.184\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 6.9503 -3.4775)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"13.973\" y=\"41.115\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 6.7237 -3.5822)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"14.684\" y=\"39.993\" transform=\"matrix(0.9881 0.1539 -0.1539 0.9881 6.4917 -3.6751)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"15.409\" y=\"38.908\" transform=\"matrix(0.9883 0.1524 -0.1524 0.9883 6.2763 -3.7667)\" fill=\"#ccc\" width=\"24.6\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"16.097\" y=\"37.768\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.0515 -3.8531)\" fill=\"#ccc\" width=\"24.598\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"-0.18\" y=\"61.903\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 11.3786 -1.213)\" fill=\"#ccc\" width=\"25.098\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"0.608\" y=\"60.714\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 11.0874 -1.3627)\" fill=\"#ccc\" width=\"25\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"1.382\" y=\"59.502\" transform=\"matrix(0.9842 0.1773 -0.1773 0.9842 10.787 -1.5171)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"2.193\" y=\"58.392\" transform=\"matrix(0.9844 0.1759 -0.1759 0.9844 10.5179 -1.6726)\" fill=\"#ccc\" width=\"25\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"2.989\" y=\"57.216\" transform=\"matrix(0.9847 0.1744 -0.1744 0.9847 10.233 -1.8231)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"3.814\" y=\"55.991\" transform=\"matrix(0.9849 0.173 -0.173 0.9849 9.9493 -1.9679)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"4.618\" y=\"54.832\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 9.6735 -2.1133)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"5.397\" y=\"53.678\" transform=\"matrix(0.9854 0.1701 -0.1701 0.9854 9.4079 -2.252)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"6.088\" y=\"52.481\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 9.1303 -2.3727)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"6.933\" y=\"51.283\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 8.8582 -2.5079)\" fill=\"#ccc\" width=\"24.798\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"7.685\" y=\"50.194\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 8.6111 -2.6329)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"26.118\" y=\"66.574\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 12.6426 -5.792)\" fill=\"#ccc\" width=\"24.198\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"26.896\" y=\"65.397\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 12.3409 -5.9136)\" fill=\"#ccc\" width=\"24.2\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"27.672\" y=\"64.202\" transform=\"matrix(0.9842 0.1773 -0.1773 0.9842 12.0304 -6.0328)\" fill=\"#ccc\" width=\"24.202\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"28.516\" y=\"63\" transform=\"matrix(0.9844 0.1758 -0.1758 0.9844 11.725 -6.1488)\" fill=\"#ccc\" width=\"24.098\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"29.205\" y=\"61.805\" transform=\"matrix(0.9847 0.1743 -0.1743 0.9847 11.4215 -6.2431)\" fill=\"#ccc\" width=\"24.1\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"30.01\" y=\"60.578\" transform=\"matrix(0.9849 0.1729 -0.1729 0.9849 11.125 -6.3583)\" fill=\"#ccc\" width=\"24.098\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"30.798\" y=\"59.299\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 10.8215 -6.4683)\" fill=\"#ccc\" width=\"24.1\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"31.635\" y=\"58.096\" transform=\"matrix(0.9854 0.17 -0.17 0.9854 10.529 -6.5709)\" fill=\"#ccc\" width=\"23.998\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"32.387\" y=\"56.891\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 10.2439 -6.6677)\" fill=\"#ccc\" width=\"24\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"33.121\" y=\"55.678\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 9.9552 -6.7556)\" fill=\"#ccc\" width=\"23.998\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"33.883\" y=\"54.493\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 9.6801 -6.8481)\" fill=\"#ccc\" width=\"24.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"51.616\" y=\"71.397\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 13.9355 -10.3867)\" fill=\"#ccc\" width=\"25.098\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"52.395\" y=\"70.097\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 13.5977 -10.466)\" fill=\"#ccc\" width=\"25\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"53.113\" y=\"68.816\" transform=\"matrix(0.9842 0.1772 -0.1772 0.9842 13.2499 -10.5359)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"53.914\" y=\"67.593\" transform=\"matrix(0.9844 0.1758 -0.1758 0.9844 12.9351 -10.6215)\" fill=\"#ccc\" width=\"24.998\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"54.7\" y=\"66.319\" transform=\"matrix(0.9847 0.1744 -0.1744 0.9847 12.613 -10.7017)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"55.425\" y=\"65.096\" transform=\"matrix(0.9849 0.1729 -0.1729 0.9849 12.296 -10.7626)\" fill=\"#ccc\" width=\"24.998\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"56.196\" y=\"63.797\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 11.9752 -10.8261)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"56.904\" y=\"62.57\" transform=\"matrix(0.9854 0.1701 -0.1701 0.9854 11.6713 -10.8839)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"57.708\" y=\"61.314\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 11.3585 -10.9494)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"58.526\" y=\"60.108\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 11.0591 -11.0138)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"59.189\" y=\"58.789\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 10.7472 -11.0482)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"60.083\" y=\"57.394\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 10.5285 -11.2155)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"60.83\" y=\"56.206\" transform=\"matrix(0.9864 0.1642 -0.1642 0.9864 10.2397 -11.2602)\" fill=\"#ccc\" width=\"24.798\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"61.504\" y=\"55.012\" transform=\"matrix(0.9867 0.1627 -0.1627 0.9867 9.9512 -11.2897)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"62.307\" y=\"53.794\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 9.6707 -11.3365)\" fill=\"#ccc\" width=\"24.7\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"63.032\" y=\"52.703\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 9.4071 -11.3678)\" fill=\"#ccc\" width=\"24.698\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"63.686\" y=\"51.504\" transform=\"matrix(0.9874 0.1584 -0.1584 0.9874 9.1338 -11.3925)\" fill=\"#ccc\" width=\"24.702\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"64.398\" y=\"50.279\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 8.8552 -11.4179)\" fill=\"#ccc\" width=\"24.7\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"65.089\" y=\"49.109\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 8.5867 -11.4281)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"65.908\" y=\"47.914\" transform=\"matrix(0.9881 0.1539 -0.1539 0.9881 8.3209 -11.464)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"66.576\" y=\"46.783\" transform=\"matrix(0.9883 0.1525 -0.1525 0.9883 8.0799 -11.4797)\" fill=\"#ccc\" width=\"24.6\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"67.293\" y=\"45.572\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 7.817 -11.4946)\" fill=\"#ccc\" width=\"24.598\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"68.221\" y=\"44.095\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 7.604 -11.644)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"68.869\" y=\"42.897\" transform=\"matrix(0.9887 0.1496 -0.1496 0.9887 7.3531 -11.6514)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"69.703\" y=\"41.615\" transform=\"matrix(0.989 0.148 -0.148 0.989 7.0836 -11.669)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"70.494\" y=\"40.399\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 6.8333 -11.6846)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"71.209\" y=\"39.083\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 6.571 -11.6871)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"71.994\" y=\"37.87\" transform=\"matrix(0.9896 0.1436 -0.1436 0.9896 6.3326 -11.6965)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"72.7\" y=\"36.622\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 6.0817 -11.6829)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"73.47\" y=\"35.4\" transform=\"matrix(0.9901 0.1406 -0.1406 0.9901 5.8491 -11.6918)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"74.301\" y=\"34.116\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 5.6026 -11.6909)\" fill=\"#ccc\" width=\"24.4\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"74.981\" y=\"32.877\" transform=\"matrix(0.9905 0.1375 -0.1375 0.9905 5.3689 -11.6669)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"75.797\" y=\"31.589\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 5.1337 -11.6659)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"34.776\" y=\"53.079\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 9.4575 -7.0074)\" fill=\"#ccc\" width=\"23.902\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"35.624\" y=\"51.901\" transform=\"matrix(0.9864 0.1642 -0.1642 0.9864 9.1845 -7.1059)\" fill=\"#ccc\" width=\"23.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"36.275\" y=\"50.799\" transform=\"matrix(0.9867 0.1628 -0.1628 0.9867 8.9293 -7.1718)\" fill=\"#ccc\" width=\"23.902\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"37.005\" y=\"49.703\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 8.6744 -7.2443)\" fill=\"#ccc\" width=\"23.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"37.833\" y=\"48.494\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 8.4049 -7.323)\" fill=\"#ccc\" width=\"23.798\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"38.486\" y=\"47.403\" transform=\"matrix(0.9874 0.1584 -0.1584 0.9874 8.1603 -7.3814)\" fill=\"#ccc\" width=\"23.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"39.214\" y=\"46.189\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 7.896 -7.4465)\" fill=\"#ccc\" width=\"23.8\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"40.028\" y=\"45.1\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 7.6546 -7.5202)\" fill=\"#ccc\" width=\"23.8\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"40.672\" y=\"43.998\" transform=\"matrix(0.9881 0.154 -0.154 0.9881 7.418 -7.57)\" fill=\"#ccc\" width=\"23.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"41.387\" y=\"42.775\" transform=\"matrix(0.9883 0.1525 -0.1525 0.9883 7.1687 -7.6166)\" fill=\"#ccc\" width=\"23.7\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"42.215\" y=\"41.705\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.9403 -7.684)\" fill=\"#ccc\" width=\"23.698\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"43.113\" y=\"40.188\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.7215 -7.837)\" fill=\"#ccc\" width=\"23.698\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"43.89\" y=\"39.023\" transform=\"matrix(0.9888 0.1495 -0.1495 0.9888 6.482 -7.8852)\" fill=\"#ccc\" width=\"23.602\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"44.598\" y=\"37.801\" transform=\"matrix(0.989 0.148 -0.148 0.989 6.2377 -7.9288)\" fill=\"#ccc\" width=\"23.6\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"45.389\" y=\"36.576\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 5.9975 -7.982)\" fill=\"#ccc\" width=\"23.6\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"46.206\" y=\"35.386\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 5.766 -8.0354)\" fill=\"#ccc\" width=\"23.598\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"47.02\" y=\"34.196\" transform=\"matrix(0.9896 0.1435 -0.1435 0.9896 5.5377 -8.0854)\" fill=\"#ccc\" width=\"23.598\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"47.774\" y=\"33.01\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 5.3118 -8.1163)\" fill=\"#ccc\" width=\"23.502\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"48.474\" y=\"31.786\" transform=\"matrix(0.9901 0.1405 -0.1405 0.9901 5.0843 -8.1446)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"49.294\" y=\"30.494\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 4.852 -8.1876)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"50.123\" y=\"29.321\" transform=\"matrix(0.9905 0.1374 -0.1374 0.9905 4.6362 -8.2219)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"50.891\" y=\"28.082\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 4.4212 -8.2502)\" fill=\"#ccc\" width=\"23.4\" height=\"0.3\"></rect>\n</g>\n<g id=\"shadow\">\n\t<path fill=\"#000\" d=\"M68.3,42.4l0.6-1l-1-0.2l7-11.3l-0.7-0.1l-7.6,12.3l-23.4-3.6l0.7-1l-1.1-0.2l7.1-10.9l-0.7-0.1l-7.7,11.9l-24.2-3.7\n\t\tL17,34.9l23.2,3.5l-0.7,1l1.1,0.2l-7.3,11.2L8.9,46.7l-0.3,0.4L32,51l-0.6,1l1,0.2l-7.7,11.9l0.6,0.1l8.4-12.9l23.6,4l-0.6,1l1,0.2\n\t\tl-7.6,12.3l0.7,0.1L59,55.6l25.5,4.3l0.3-0.4l-24.4-4.1l0.6-1l-1-0.2l7.2-11.6l25.3,3.9l0.2-0.4L68.3,42.4z M58.6,55.2l-23.6-4\n\t\tl0.6-1l-1-0.2l7.3-11.2l23.4,3.6l-0.6,1l1,0.2L58.6,55.2z\"></path>\n</g>\n<g id=\"hlight\">\n\t\n\t\t<rect x=\"1.601\" y=\"70.319\" transform=\"matrix(0.9843 0.1767 -0.1767 0.9843 13.0946 -5.9139)\" fill=\"#f2f2f2\" width=\"76.306\" height=\"0.5\"></rect>\n<text id=\"watts\" name=\"watts\" x = \"40\" y = \"20\" fill= \"blue\" style=\"font-family:verdana;font-weight:bold; font-size:10px\">266 W</text>\n</g>\n</g></svg></svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":560,"y":220,"wires":[[]]},{"id":"5b90fdc6.6d0af4","type":"inject","z":"1fbbbe5c.b86de2","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":220,"wires":[["db2b475d.93c3f8"]]},{"id":"db2b475d.93c3f8","type":"function","z":"1fbbbe5c.b86de2","name":"Change fill style","func":"msg.payload = {\n\"command\": \"update_style\",\n\"selector\": \"#panels\",\n\"attributeName\": \"fill\",\n\"attributeValue\": \"orange\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":360,"y":220,"wires":[["7bfe8fa1.78341"]]},{"id":"df5f317f.eb69","type":"ui_group","z":"","name":"Default","tab":"a523cf7e.798ec","disp":true,"width":"6","collapse":false},{"id":"a523cf7e.798ec","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Perhaps my CSS master (@Steve-Mcl) can explain this better than me, but I think it is related to this quote that I have added some time ago to that tutorial:

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)!

If it works for you now, please don't forget to close this issue. Have fun with it! Bart

metcalfepete commented 4 years ago

Hi Bart,

Thanks for looking at my problem. After stripping things down I found that topic: "databind" was still in, and it was conflicting with command:"update_style". After I removed it things were working great.

Again thanks for all your help. Awesome package that you guys put together.

Cheer Pete

[cid:74aa8ef7-e176-46bf-9b20-ff38aaf2f78e]

From: bartbutenaers notifications@github.com Sent: April 15, 2020 6:03 PM To: bartbutenaers/node-red-contrib-ui-svg node-red-contrib-ui-svg@noreply.github.com Cc: metcalfepete metcalfepete@hotmail.com; Mention mention@noreply.github.com Subject: Re: [bartbutenaers/node-red-contrib-ui-svg] Changing attributes in complex SVG files is a problem (#57)

Hello @metcalfepetehttps://github.com/metcalfepete,

Thanks for the constructive feedback!

In our wiki you can find a tutorial https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Dynamically-change-a-style-attribute-(like-fill-color) about setting styles (e.g. fill). When I change your function code to this:

msg.payload = { "command": "update_style", "selector": "#panels", "attributeName": "fill", "attributeValue": "orange" }

return msg;

Then you will see it works:

[svg_fill_style]https://user-images.githubusercontent.com/14224149/79393136-016c5700-7f75-11ea-889f-46bb785e6db0.gif

Here is the entire flow:

[{"id":"7bfe8fa1.78341","type":"ui_svg_graphics","z":"1fbbbe5c.b86de2","group":"df5f317f.eb69","order":0,"width":"6","height":"19","svgString":"<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\">Copyright Opto 22 \n<g id=\"shape\">\n\t<path id=\"panels\" fill=\"MidnightBlue\" d=\"M100,33.4l-24.1-3.3l-7,11.3l-1-0.2l7-11.3l-0.7-0.1L51,26.6l-7.1,10.9l-1.1-0.2l7.1-10.9l-0.7-0.1L25.1,23\n\t\tl-7.2,10.5l-1,1.4l11,1.7v1.1l-11.7-1.8L8.8,46.7l-0.3,0.4L25.7,50v0.7L25.1,51L7.8,48.1l-7.9,11.5l8.2,1.5L6.7,62l-4.8-0.9\n\t\tl0.9,1.3v0.9l-0.9,0.9L77,77.7l0.6-1v-0.9l-0.444-0.698l0.719-1.235L95.3,62.5l3.7,0.6V60l-1.454-0.273L97.4,59.8l-1.9-0.3V43.622\n\t\tL100,35.9V33.4L100,33.4z M92.3,46.5l0.2-0.4l0.9-1.6v0.226l-7.687,13.191L85.6,57.9l6-10.4l-24.3-3.7L61,54l-1-0.2l6.9-11.2\n\t\tL92.3,46.5z M76.7,73.3L83.9,61l-24.42-4.087L59.5,56.9l24.548,3.876L76.78,73.248L76.7,73.3z M65.3,42.4l-0.6,1L42.3,40l-6.5,10\n\t\tl-1-0.2l7.1-11L65.3,42.4z M30,37l10.2,1.6l-0.7,1L30,38.1V37z M39.1,68.1L8.6,62.4l1.4-0.8l14.6,2.7l0.6,0.1l7.6-11.7l1,0.2\n\t\tl-7.6,11.8l14.2,2.6L39.1,68.1z M75,74.5l-33.9-6.1l1.3-0.8l7.8,1.4l0.7,0.1l6.8-11l1.63-1.087L51.8,69.2l24.4,4.5L75,74.5z\n\t\t M79.118,71.735l6.263-10.749L93.7,62.3L79.118,71.735z M93.4,59.1l-6.35-0.977l6.35-10.897V59.1z M95.5,41.122V41.1l4.488-7.679\n\t\tL95.5,41.122z\">\n\n<g id=\"dark\">\n\t<polygon fill=\"#666\" points=\"30,37 28,36.7 28,37.8 30,38.1 \t\">\n\t<polygon fill=\"#666\" points=\"28.6,36.3 28,36.2 28,36.2 \t\">\n\t<polygon fill=\"#666\" points=\"76.4,76.4 100,35.9 100,33.4 76.4,73.9 \t\">\n\t<polygon fill=\"#666\" points=\"33.3,50.9 25.8,49.7 25.8,49.7 \t\">\n\t<polygon fill=\"#666\" points=\"25.2,51.1 31.3,52.2 32,51.2 25.8,50.1 25.8,50.8 \t\">\n\t<polygon fill=\"#666\" points=\"35.7,50.2 35.8,50 34.8,49.8 34.6,50 \t\">\n\t<polygon fill=\"#666\" points=\"60.9,54.5 61.2,54 60.2,53.9 59.9,54.3 \t\">\n\t<polygon fill=\"#666\" points=\"34.1,52.6 54.2,56 56.7,56.4 57.3,55.4 33.7,51.5 32.9,52.6 34,52.8 \t\">\n\t<polygon fill=\"#666\" points=\"97.6,59.8 97.6,59.7 97.4,59.8 95.5,59.5 95.5,41.1 93.5,44.5 93.5,59.1 85.7,57.9 84.7,59.6 \n\t\t60.3,55.5 84.7,59.6 84.5,60 59,55.7 57.6,58 59.5,56.9 93.6,62.3 76.7,73.3 76.5,73.7 76.2,73.7 75,74.5 41.1,68.3 42.4,67.5 \n\t\t40.5,67.2 39.2,68 8.6,62.4 10.1,61.6 8.2,61.2 6.8,62.1 2,61.2 2.9,62.5 2.9,63.4 2,64.3 77.1,77.8 77.8,76.8 77.8,75.9 \n\t\t77.1,74.8 76.9,74.8 95.5,62.6 99.2,63.2 99.2,60.1 \t\">\n\t<path fill=\"#666\" d=\"M59.5,53.7l-0.9,1.5L59.5,53.7z\">\n\t<polygon fill=\"#666\" points=\"17.8,36.3 18.5,35.3 17,35 16.3,36 \t\">\n\t<polygon fill=\"#666\" points=\"7.9,48.2 9.4,48.5 10.1,47.5 8.6,47.3 8.9,46.8 8.9,46.8 16.1,36.2 0.1,59.6 0.1,59.6 \t\">\n\n<g id=\"light\">\n\t\n\t\t<rect x=\"17.113\" y=\"36.276\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 5.8372 -4.0161)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\">\n\t\n\t\t<rect x=\"17.881\" y=\"35.219\" transform=\"matrix(0.9888 0.1495 -0.1495 0.9888 5.6261 -4.1072)\" fill=\"#ccc\" width=\"24.502\" height=\"0.3\">\n\t\n\t\t<rect x=\"18.699\" y=\"34.017\" transform=\"matrix(0.989 0.148 -0.148 0.989 5.3975 -4.2042)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\">\n\t\n\t\t<rect x=\"19.491\" y=\"32.778\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 5.1665 -4.2948)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\">\n\t\n\t\t<rect x=\"20.299\" y=\"31.678\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 4.9586 -4.376)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\">\n\t\n\t\t<rect x=\"21.121\" y=\"30.49\" transform=\"matrix(0.9896 0.1435 -0.1435 0.9896 4.742 -4.4644)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\">\n\t\n\t\t<rect x=\"21.884\" y=\"29.313\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 4.5289 -4.5414)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\">\n\t\n\t\t<rect x=\"22.689\" y=\"28.222\" transform=\"matrix(0.9901 0.1405 -0.1405 0.9901 4.3322 -4.6204)\" fill=\"#ccc\" width=\"24.4\" height=\"0.3\">\n\t\n\t\t<rect x=\"23.483\" y=\"26.991\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 4.1184 -4.6894)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\">\n\t\n\t\t<rect x=\"24.297\" y=\"25.799\" transform=\"matrix(0.9905 0.1375 -0.1375 0.9905 3.9142 -4.765)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\">\n\t\n\t\t<rect x=\"25.095\" y=\"24.587\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 3.7103 -4.8355)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\">\n\t\n\t\t<rect x=\"8.869\" y=\"48.796\" transform=\"matrix(0.9862 0.1658 -0.1658 0.9862 8.3996 -2.8332)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\">\n\t\n\t\t<rect x=\"9.589\" y=\"47.673\" transform=\"matrix(0.9864 0.1643 -0.1643 0.9864 8.1466 -2.9472)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\">\n\t\n\t\t<rect x=\"10.374\" y=\"46.613\" transform=\"matrix(0.9867 0.1628 -0.1628 0.9867 7.907 -3.0682)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\">\n\t\n\t\t<rect x=\"11.094\" y=\"45.493\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 7.6606 -3.1764)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\">\n\t\n\t\t<rect x=\"11.831\" y=\"44.402\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 7.4218 -3.2842)\" fill=\"#ccc\" width=\"24.598\" height=\"0.2\">\n\t\n\t\t<rect x=\"12.505\" y=\"43.315\" transform=\"matrix(0.9874 0.1583 -0.1583 0.9874 7.1853 -3.3792)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\">\n\t\n\t\t<rect x=\"13.202\" y=\"42.184\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 6.9503 -3.4775)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\">\n\t\n\t\t<rect x=\"13.973\" y=\"41.115\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 6.7237 -3.5822)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\">\n\t\n\t\t<rect x=\"14.684\" y=\"39.993\" transform=\"matrix(0.9881 0.1539 -0.1539 0.9881 6.4917 -3.6751)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\">\n\t\n\t\t<rect x=\"15.409\" y=\"38.908\" transform=\"matrix(0.9883 0.1524 -0.1524 0.9883 6.2763 -3.7667)\" fill=\"#ccc\" width=\"24.6\" height=\"0.3\">\n\t\n\t\t<rect x=\"16.097\" y=\"37.768\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.0515 -3.8531)\" fill=\"#ccc\" width=\"24.598\" height=\"0.3\">\n\t\n\t\t<rect x=\"-0.18\" y=\"61.903\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 11.3786 -1.213)\" fill=\"#ccc\" width=\"25.098\" height=\"0.3\">\n\t\n\t\t<rect x=\"0.608\" y=\"60.714\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 11.0874 -1.3627)\" fill=\"#ccc\" width=\"25\" height=\"0.3\">\n\t\n\t\t<rect x=\"1.382\" y=\"59.502\" transform=\"matrix(0.9842 0.1773 -0.1773 0.9842 10.787 -1.5171)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\">\n\t\n\t\t<rect x=\"2.193\" y=\"58.392\" transform=\"matrix(0.9844 0.1759 -0.1759 0.9844 10.5179 -1.6726)\" fill=\"#ccc\" width=\"25\" height=\"0.2\">\n\t\n\t\t<rect x=\"2.989\" y=\"57.216\" transform=\"matrix(0.9847 0.1744 -0.1744 0.9847 10.233 -1.8231)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\">\n\t\n\t\t<rect x=\"3.814\" y=\"55.991\" transform=\"matrix(0.9849 0.173 -0.173 0.9849 9.9493 -1.9679)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\">\n\t\n\t\t<rect x=\"4.618\" y=\"54.832\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 9.6735 -2.1133)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\">\n\t\n\t\t<rect x=\"5.397\" y=\"53.678\" transform=\"matrix(0.9854 0.1701 -0.1701 0.9854 9.4079 -2.252)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\">\n\t\n\t\t<rect x=\"6.088\" y=\"52.481\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 9.1303 -2.3727)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\">\n\t\n\t\t<rect x=\"6.933\" y=\"51.283\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 8.8582 -2.5079)\" fill=\"#ccc\" width=\"24.798\" height=\"0.2\">\n\t\n\t\t<rect x=\"7.685\" y=\"50.194\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 8.6111 -2.6329)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\">\n\t\n\t\t<rect x=\"26.118\" y=\"66.574\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 12.6426 -5.792)\" fill=\"#ccc\" width=\"24.198\" height=\"0.3\">\n\t\n\t\t<rect x=\"26.896\" y=\"65.397\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 12.3409 -5.9136)\" fill=\"#ccc\" width=\"24.2\" height=\"0.3\">\n\t\n\t\t<rect x=\"27.672\" y=\"64.202\" transform=\"matrix(0.9842 0.1773 -0.1773 0.9842 12.0304 -6.0328)\" fill=\"#ccc\" width=\"24.202\" height=\"0.2\">\n\t\n\t\t<rect x=\"28.516\" y=\"63\" transform=\"matrix(0.9844 0.1758 -0.1758 0.9844 11.725 -6.1488)\" fill=\"#ccc\" width=\"24.098\" height=\"0.2\">\n\t\n\t\t<rect x=\"29.205\" y=\"61.805\" transform=\"matrix(0.9847 0.1743 -0.1743 0.9847 11.4215 -6.2431)\" fill=\"#ccc\" width=\"24.1\" height=\"0.2\">\n\t\n\t\t<rect x=\"30.01\" y=\"60.578\" transform=\"matrix(0.9849 0.1729 -0.1729 0.9849 11.125 -6.3583)\" fill=\"#ccc\" width=\"24.098\" height=\"0.2\">\n\t\n\t\t<rect x=\"30.798\" y=\"59.299\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 10.8215 -6.4683)\" fill=\"#ccc\" width=\"24.1\" height=\"0.2\">\n\t\n\t\t<rect x=\"31.635\" y=\"58.096\" transform=\"matrix(0.9854 0.17 -0.17 0.9854 10.529 -6.5709)\" fill=\"#ccc\" width=\"23.998\" height=\"0.2\">\n\t\n\t\t<rect x=\"32.387\" y=\"56.891\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 10.2439 -6.6677)\" fill=\"#ccc\" width=\"24\" height=\"0.2\">\n\t\n\t\t<rect x=\"33.121\" y=\"55.678\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 9.9552 -6.7556)\" fill=\"#ccc\" width=\"23.998\" height=\"0.2\">\n\t\n\t\t<rect x=\"33.883\" y=\"54.493\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 9.6801 -6.8481)\" fill=\"#ccc\" width=\"24.002\" height=\"0.2\">\n\t\n\t\t<rect x=\"51.616\" y=\"71.397\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 13.9355 -10.3867)\" fill=\"#ccc\" width=\"25.098\" height=\"0.3\">\n\t\n\t\t<rect x=\"52.395\" y=\"70.097\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 13.5977 -10.466)\" fill=\"#ccc\" width=\"25\" height=\"0.3\">\n\t\n\t\t<rect x=\"53.113\" y=\"68.816\" transform=\"matrix(0.9842 0.1772 -0.1772 0.9842 13.2499 -10.5359)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\">\n\t\n\t\t<rect x=\"53.914\" y=\"67.593\" transform=\"matrix(0.9844 0.1758 -0.1758 0.9844 12.9351 -10.6215)\" fill=\"#ccc\" width=\"24.998\" height=\"0.2\">\n\t\n\t\t<rect x=\"54.7\" y=\"66.319\" transform=\"matrix(0.9847 0.1744 -0.1744 0.9847 12.613 -10.7017)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\">\n\t\n\t\t<rect x=\"55.425\" y=\"65.096\" transform=\"matrix(0.9849 0.1729 -0.1729 0.9849 12.296 -10.7626)\" fill=\"#ccc\" width=\"24.998\" height=\"0.2\">\n\t\n\t\t<rect x=\"56.196\" y=\"63.797\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 11.9752 -10.8261)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\">\n\t\n\t\t<rect x=\"56.904\" y=\"62.57\" transform=\"matrix(0.9854 0.1701 -0.1701 0.9854 11.6713 -10.8839)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\">\n\t\n\t\t<rect x=\"57.708\" y=\"61.314\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 11.3585 -10.9494)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\">\n\t\n\t\t<rect x=\"58.526\" y=\"60.108\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 11.0591 -11.0138)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\">\n\t\n\t\t<rect x=\"59.189\" y=\"58.789\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 10.7472 -11.0482)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\">\n\t\n\t\t<rect x=\"60.083\" y=\"57.394\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 10.5285 -11.2155)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\">\n\t\n\t\t<rect x=\"60.83\" y=\"56.206\" transform=\"matrix(0.9864 0.1642 -0.1642 0.9864 10.2397 -11.2602)\" fill=\"#ccc\" width=\"24.798\" height=\"0.2\">\n\t\n\t\t<rect x=\"61.504\" y=\"55.012\" transform=\"matrix(0.9867 0.1627 -0.1627 0.9867 9.9512 -11.2897)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\">\n\t\n\t\t<rect x=\"62.307\" y=\"53.794\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 9.6707 -11.3365)\" fill=\"#ccc\" width=\"24.7\" height=\"0.2\">\n\t\n\t\t<rect x=\"63.032\" y=\"52.703\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 9.4071 -11.3678)\" fill=\"#ccc\" width=\"24.698\" height=\"0.2\">\n\t\n\t\t<rect x=\"63.686\" y=\"51.504\" transform=\"matrix(0.9874 0.1584 -0.1584 0.9874 9.1338 -11.3925)\" fill=\"#ccc\" width=\"24.702\" height=\"0.2\">\n\t\n\t\t<rect x=\"64.398\" y=\"50.279\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 8.8552 -11.4179)\" fill=\"#ccc\" width=\"24.7\" height=\"0.2\">\n\t\n\t\t<rect x=\"65.089\" y=\"49.109\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 8.5867 -11.4281)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\">\n\t\n\t\t<rect x=\"65.908\" y=\"47.914\" transform=\"matrix(0.9881 0.1539 -0.1539 0.9881 8.3209 -11.464)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\">\n\t\n\t\t<rect x=\"66.576\" y=\"46.783\" transform=\"matrix(0.9883 0.1525 -0.1525 0.9883 8.0799 -11.4797)\" fill=\"#ccc\" width=\"24.6\" height=\"0.3\">\n\t\n\t\t<rect x=\"67.293\" y=\"45.572\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 7.817 -11.4946)\" fill=\"#ccc\" width=\"24.598\" height=\"0.3\">\n\t\n\t\t<rect x=\"68.221\" y=\"44.095\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 7.604 -11.644)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\">\n\t\n\t\t<rect x=\"68.869\" y=\"42.897\" transform=\"matrix(0.9887 0.1496 -0.1496 0.9887 7.3531 -11.6514)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\">\n\t\n\t\t<rect x=\"69.703\" y=\"41.615\" transform=\"matrix(0.989 0.148 -0.148 0.989 7.0836 -11.669)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\">\n\t\n\t\t<rect x=\"70.494\" y=\"40.399\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 6.8333 -11.6846)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\">\n\t\n\t\t<rect x=\"71.209\" y=\"39.083\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 6.571 -11.6871)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\">\n\t\n\t\t<rect x=\"71.994\" y=\"37.87\" transform=\"matrix(0.9896 0.1436 -0.1436 0.9896 6.3326 -11.6965)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\">\n\t\n\t\t<rect x=\"72.7\" y=\"36.622\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 6.0817 -11.6829)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\">\n\t\n\t\t<rect x=\"73.47\" y=\"35.4\" transform=\"matrix(0.9901 0.1406 -0.1406 0.9901 5.8491 -11.6918)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\">\n\t\n\t\t<rect x=\"74.301\" y=\"34.116\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 5.6026 -11.6909)\" fill=\"#ccc\" width=\"24.4\" height=\"0.3\">\n\t\n\t\t<rect x=\"74.981\" y=\"32.877\" transform=\"matrix(0.9905 0.1375 -0.1375 0.9905 5.3689 -11.6669)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\">\n\t\n\t\t<rect x=\"75.797\" y=\"31.589\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 5.1337 -11.6659)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\">\n\t\n\t\t<rect x=\"34.776\" y=\"53.079\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 9.4575 -7.0074)\" fill=\"#ccc\" width=\"23.902\" height=\"0.2\">\n\t\n\t\t<rect x=\"35.624\" y=\"51.901\" transform=\"matrix(0.9864 0.1642 -0.1642 0.9864 9.1845 -7.1059)\" fill=\"#ccc\" width=\"23.898\" height=\"0.2\">\n\t\n\t\t<rect x=\"36.275\" y=\"50.799\" transform=\"matrix(0.9867 0.1628 -0.1628 0.9867 8.9293 -7.1718)\" fill=\"#ccc\" width=\"23.902\" height=\"0.2\">\n\t\n\t\t<rect x=\"37.005\" y=\"49.703\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 8.6744 -7.2443)\" fill=\"#ccc\" width=\"23.9\" height=\"0.2\">\n\t\n\t\t<rect x=\"37.833\" y=\"48.494\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 8.4049 -7.323)\" fill=\"#ccc\" width=\"23.798\" height=\"0.2\">\n\t\n\t\t<rect x=\"38.486\" y=\"47.403\" transform=\"matrix(0.9874 0.1584 -0.1584 0.9874 8.1603 -7.3814)\" fill=\"#ccc\" width=\"23.802\" height=\"0.2\">\n\t\n\t\t<rect x=\"39.214\" y=\"46.189\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 7.896 -7.4465)\" fill=\"#ccc\" width=\"23.8\" height=\"0.2\">\n\t\n\t\t<rect x=\"40.028\" y=\"45.1\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 7.6546 -7.5202)\" fill=\"#ccc\" width=\"23.8\" height=\"0.2\">\n\t\n\t\t<rect x=\"40.672\" y=\"43.998\" transform=\"matrix(0.9881 0.154 -0.154 0.9881 7.418 -7.57)\" fill=\"#ccc\" width=\"23.802\" height=\"0.2\">\n\t\n\t\t<rect x=\"41.387\" y=\"42.775\" transform=\"matrix(0.9883 0.1525 -0.1525 0.9883 7.1687 -7.6166)\" fill=\"#ccc\" width=\"23.7\" height=\"0.3\">\n\t\n\t\t<rect x=\"42.215\" y=\"41.705\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.9403 -7.684)\" fill=\"#ccc\" width=\"23.698\" height=\"0.3\">\n\t\n\t\t<rect x=\"43.113\" y=\"40.188\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.7215 -7.837)\" fill=\"#ccc\" width=\"23.698\" height=\"0.3\">\n\t\n\t\t<rect x=\"43.89\" y=\"39.023\" transform=\"matrix(0.9888 0.1495 -0.1495 0.9888 6.482 -7.8852)\" fill=\"#ccc\" width=\"23.602\" height=\"0.3\">\n\t\n\t\t<rect x=\"44.598\" y=\"37.801\" transform=\"matrix(0.989 0.148 -0.148 0.989 6.2377 -7.9288)\" fill=\"#ccc\" width=\"23.6\" height=\"0.3\">\n\t\n\t\t<rect x=\"45.389\" y=\"36.576\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 5.9975 -7.982)\" fill=\"#ccc\" width=\"23.6\" height=\"0.3\">\n\t\n\t\t<rect x=\"46.206\" y=\"35.386\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 5.766 -8.0354)\" fill=\"#ccc\" width=\"23.598\" height=\"0.3\">\n\t\n\t\t<rect x=\"47.02\" y=\"34.196\" transform=\"matrix(0.9896 0.1435 -0.1435 0.9896 5.5377 -8.0854)\" fill=\"#ccc\" width=\"23.598\" height=\"0.3\">\n\t\n\t\t<rect x=\"47.774\" y=\"33.01\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 5.3118 -8.1163)\" fill=\"#ccc\" width=\"23.502\" height=\"0.3\">\n\t\n\t\t<rect x=\"48.474\" y=\"31.786\" transform=\"matrix(0.9901 0.1405 -0.1405 0.9901 5.0843 -8.1446)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\">\n\t\n\t\t<rect x=\"49.294\" y=\"30.494\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 4.852 -8.1876)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\">\n\t\n\t\t<rect x=\"50.123\" y=\"29.321\" transform=\"matrix(0.9905 0.1374 -0.1374 0.9905 4.6362 -8.2219)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\">\n\t\n\t\t<rect x=\"50.891\" y=\"28.082\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 4.4212 -8.2502)\" fill=\"#ccc\" width=\"23.4\" height=\"0.3\">\n\n<g id=\"shadow\">\n\t<path fill=\"#000\" d=\"M68.3,42.4l0.6-1l-1-0.2l7-11.3l-0.7-0.1l-7.6,12.3l-23.4-3.6l0.7-1l-1.1-0.2l7.1-10.9l-0.7-0.1l-7.7,11.9l-24.2-3.7\n\t\tL17,34.9l23.2,3.5l-0.7,1l1.1,0.2l-7.3,11.2L8.9,46.7l-0.3,0.4L32,51l-0.6,1l1,0.2l-7.7,11.9l0.6,0.1l8.4-12.9l23.6,4l-0.6,1l1,0.2\n\t\tl-7.6,12.3l0.7,0.1L59,55.6l25.5,4.3l0.3-0.4l-24.4-4.1l0.6-1l-1-0.2l7.2-11.6l25.3,3.9l0.2-0.4L68.3,42.4z M58.6,55.2l-23.6-4\n\t\tl0.6-1l-1-0.2l7.3-11.2l23.4,3.6l-0.6,1l1,0.2L58.6,55.2z\">\n\n<g id=\"hlight\">\n\t\n\t\t<rect x=\"1.601\" y=\"70.319\" transform=\"matrix(0.9843 0.1767 -0.1767 0.9843 13.0946 -5.9139)\" fill=\"#f2f2f2\" width=\"76.306\" height=\"0.5\">\n<text id=\"watts\" name=\"watts\" x = \"40\" y = \"20\" fill= \"blue\" style=\"font-family:verdana;font-weight:bold; font-size:10px\">266 W\n\n","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":560,"y":220,"wires":[[]]},{"id":"5b90fdc6.6d0af4","type":"inject","z":"1fbbbe5c.b86de2","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":220,"wires":[["db2b475d.93c3f8"]]},{"id":"db2b475d.93c3f8","type":"function","z":"1fbbbe5c.b86de2","name":"Change fill style","func":"msg.payload = {\n\"command\": \"update_style\",\n\"selector\": \"#panels\",\n\"attributeName\": \"fill\",\n\"attributeValue\": \"orange\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":360,"y":220,"wires":[["7bfe8fa1.78341"]]},{"id":"df5f317f.eb69","type":"ui_group","z":"","name":"Default","tab":"a523cf7e.798ec","disp":true,"width":"6","collapse":false},{"id":"a523cf7e.798ec","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Perhaps my CSS master (@Steve-Mclhttps://github.com/Steve-Mcl) can explain this better than me, but I think it is related to this quote that I have added some time ago to that tutorial:

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)!

If it works for you now, please don't forget to close this issue. Have fun with it! Bart

- You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/57#issuecomment-614302546, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGEFM4UFVYPT726ZHV6R2CLRMYVJJANCNFSM4MIXNIZA.

metcalfepete commented 4 years ago

Hi Bart,

Thanks for looking at my problem. After stripping things down I found that topic: "databind" was still in, and it was conflicting with command:"update_style". After I removed it things were working great.

Again thanks for all your help. Awesome package that you guys put together.

Cheer Pete

bartbutenaers commented 4 years ago

Well I must admit that I already had to use my debugger a number of times, to determine why things aren't working. We definately should improve error handling, to assist our users. Will discuss this with Steve for the 2.0 release...