Having problem with svg node

General
1

hi I cant work with event or binding
I dont known what this issus

[
    {
        "id": "b546d85c72cb1a50",
        "type": "ui_svg_graphics",
        "z": "70370e82972416b2",
        "group": "9bcb92fcaf773f25",
        "order": 0,
        "width": 0,
        "height": 0,
        "svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"1280px\" height=\"530px\" viewBox=\"-0.336647093296051 -0.3398092985153198 1920.6732177734375 1080.6795654296875\" preserveAspectRatio=\"none meet\">\n  <defs id=\"svgEditorDefs\">\n    <marker id=\"arrow10-8-right\" markerHeight=\"8\" markerUnits=\"strokeWidth\" markerWidth=\"10\" orient=\"auto\" refX=\"-3\" refY=\"0\" viewBox=\"-15 -5 20 20\">\n      <path d=\"M -15 -5 L 0 0 L -15 5 z\" fill=\"black\" />\n    </marker>\n  </defs>\n  <rect id=\"svgEditorBackground\" x=\"-0.3366059362888336\" y=\"-0.1376723661813263\" width=\"1920.6732177734375\" height=\"1080.275289583165\" style=\"fill:black; stroke: aqua;\" />\n    <path d=\"M608.427354470019,165.68992183936876v85.58371074423681\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e9_pathV\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n    <path d=\"M448.4656179635929,163.47799296915133v88.29142680461177\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e2_pathV\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n    <path d=\"M922.7454864346587,165.68992183936876v85.58371074423681\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e1_pathV\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n    <path d=\"M762.1820352577951,165.77212737597785v85.58371074423673\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e3_pathV\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n    <path d=\"M1246.98945414555,165.68992183936876v85.58371074423681\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e4_pathV\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n    <path d=\"M1086.4260029686866,166.18570902952635v85.58371074423675\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e5_pathV\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n      <path d=\"M1561.3075861101897,165.68992183936876v85.58371074423681\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e6_pathV\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n      <path d=\"M447.7329894771807,165.8252462460086h1272.177178999999\" style=\"fill:none;stroke:lime;stroke-width:5px;\" id=\"e2_pathH\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n      <path d=\"M1562.961912724384,314.1902841899996v85.58371074423542\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"line_1200-lots\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n      <path d=\"M1470.019055437859,179.317111210466v88.01316807309081\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e30_pathV\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n      <path d=\"M198.68591375713072,181.9742611689053h1272.1771789999984\" style=\"fill:none;stroke:lime;stroke-width:5px;\" id=\"e30_pathH\" transform=\"matrix(-0.999999 -0.00150814 0.00150814 -0.999999 1959.38 1165.85)\" />\n      <path d=\"M1472.730011282114,330.24464155890666v85.58371074423582\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Ville-06\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n      <path d=\"M1311.0195847446153,329.7896366001181v85.58371074423553\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Indetex\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n      <path d=\"M1758.669999068306,345.41917493258416v85.58371074423633\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"line_05-juilt\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n      <path d=\"M1760.3243256825003,493.9195372832145v85.58371074423542\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_05-juilt\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" /><text dy=\"-0.5em\" style=\"fill:black;font-family:Arial;font-size:20px;\" id=\"e2_text\">\n        <textPath id=\"e1_textPath\" xlink:href=\"#line_05-juilt\">T</textPath>\n      </text>\n    \n    <path d=\"M1400.7441349333262,166.18570902952635v85.58371074423675\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e7_pathV\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n    <path d=\"M1246.98945414555,312.16003347247226v85.58371074424144\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Zone-Ind\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n    <path d=\"M1086.4260029686866,313.00719603927587v85.58371074423678\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Ville-04\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n    <path d=\"M922.7454864346587,312.16003347247226v85.58371074424144\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_O.MADHI\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n    <path d=\"M762.1820352577951,313.00719603927587v85.58371074423673\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Mouilha\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n    <path d=\"M608.427354470019,312.1600334724724v85.58371074424133\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Ouanougha\" transform=\"matrix(1 0 0 0.990977 41.3582 177.357)\" />\n    <path d=\"M447.8639032931553,313.00719603927587v85.58371074423678\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_FORMAGE\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n    <path d=\"M518.195453027749,181.7442792082743v85.58371074423758\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e17_pathV\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n    <path d=\"M357.6320019248936,182.09520876281056v85.58371074423599\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"line-01\" transform=\"matrix(-0.999999 -0.00150814 0.00150814 -0.999999 1959.38 1165.85)\" />\n    <path d=\"M832.5135849923886,181.7442792082743v85.58371074423758\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e19_pathV\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n    <path d=\"M671.9573922896417,179.8771316174919v85.58371074423599\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e20_pathV\" transform=\"matrix(-0.999999 -0.00150814 0.00150814 -0.999999 1959.38 1165.85)\" />\n    <path d=\"M1156.75755270328,181.7442792082743v85.58371074423758\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e21_pathV\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n    <path d=\"M996.1941016004248,182.09520876281056v85.58371074423599\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e22_pathV\" transform=\"matrix(-0.999999 -0.00150814 0.00150814 -0.999999 1959.38 1165.85)\" />\n    <path d=\"M1310.5122335650644,182.09520876281056v85.58371074423599\" style=\"fill:none;stroke:lime;stroke-width:2px;\" id=\"e23_pathV\" transform=\"matrix(-0.999999 -0.00150814 0.00150814 -0.999999 1959.38 1165.85)\" />\n    <path d=\"M1156.75755270328,328.21439084137944v85.58371074424167\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Ville05\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n    <path d=\"M996.1941016004248,328.9166957725588v85.58371074423667\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Ville-01\" transform=\"matrix(-0.999999 -0.00150814 0.00150814 -0.999999 1959.38 1165.85)\" />\n    <path d=\"M832.5135849923886,328.21439084137944v85.58371074424167\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Chellal\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n    <path d=\"M671.9501338895333,328.9166957725588v85.58371074423656\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Larocade\" transform=\"matrix(-0.999999 -0.00150814 0.00150814 -0.999999 1959.38 1165.85)\" />\n    <path d=\"M518.195453027749,328.21439084137944v85.58371074424167\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Ville-02\" transform=\"matrix(-0.999999 -0.00150814 0.00149453 -0.990976 1959.39 1163.85)\" />\n    <path d=\"M357.6320019248936,328.9166957725588v85.58371074423667\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_Tarmount\" transform=\"matrix(-0.999999 -0.00150814 0.00150814 -0.999999 1959.38 1165.85)\" />\n    <path d=\"M1400.7441349333258,313.004089400808v85.58371074423678\" style=\"fill:none;stroke:silver;stroke-width:2px;marker-end:url(#arrow10-8-right);\" id=\"bus_GARE\" transform=\"matrix(1 0 0 1 41.3582 175.359)\" />\n  \n    <rect x=\"540.2863079658159\" y=\"236.54310607910156\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Ouanougha\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n    <rect x=\"393.7989422431596\" y=\"237.9601287841797\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_FORMAGE\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n    <rect x=\"826.0894695869097\" y=\"236.54310607910156\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_O.MADHI\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n    <rect x=\"679.6013714423784\" y=\"237.9601287841797\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Mouilha\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n    <rect x=\"1120.9229046455034\" y=\"236.54310607910156\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Zone-Ind\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n    <rect x=\"974.4314495673784\" y=\"237.9601287841797\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Ville-04\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n    <rect x=\"1406.7302776923784\" y=\"236.54310607910156\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_1200-lots\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n    <rect x=\"1260.2412640205034\" y=\"237.9601287841797\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_GARE\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n    <rect x=\"458.24206342647267\" y=\"251.02477911993992\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Ville-02\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"311.7523783678789\" y=\"252.44180182501805\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Tarmount\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"744.0451029772539\" y=\"251.02477911993992\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Chellal\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"597.5570048327227\" y=\"252.44180182501805\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Larocade\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"1038.8765238756914\" y=\"251.02477911993992\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Ville05\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"892.3870829577227\" y=\"252.44180182501805\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Ville-01\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"1324.6838969225664\" y=\"251.02477911993992\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Ville-06\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"1178.1948832506914\" y=\"252.44180182501805\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_Indetex\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"135.5709513659258\" y=\"148.8072955994321\" style=\"fill:lime;stroke:gray;stroke-width:5px;\" id=\"e1_rect\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"134.91926374385548\" y=\"733.2000568299009\" style=\"fill:lime;stroke:gray;stroke-width:5px;\" id=\"e5_rect\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"132.48800458858204\" y=\"599.5665119080259\" style=\"fill:lime;stroke:gray;stroke-width:5px;\" id=\"e6_rect\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(-1.09977 -0.0016586 0.00165682 -1.09859 1981.24 1178.41)\" />\n    <rect x=\"1583.996513043941\" y=\"400.82659912109375\" style=\"fill:silver;stroke:gray;stroke-width:5px;\" id=\"breaker_05-juilt\" width=\"65.3654\" height=\"56.3935\" transform=\"matrix(1.09977 0 0 1.09859 19.4825 162.827)\" />\n<text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1556.90087890625\" y=\"620.6297607421875\" id=\"e1_texte\">1200 lots</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1552.087158203125\" y=\"731.3453369140625\" id=\"e2_texte\">Tarmount</text><text style=\"fill:blue;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1239.760498046875\" y=\"620.6297607421875\" id=\"e3_texte\" transform=\"matrix(1.06237 0 0 1 -90.5072 0)\">\n    <tspan x=\"1239.760498046875\" style=\"fill:aqua;\">Zone Ind</tspan>\n    <tspan x=\"1239.760498046875\" dy=\"1.25em\" style=\"fill:aqua;\">Hodna Cable</tspan>\n  </text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1229.56787109375\" y=\"731.3453369140625\" id=\"e4_texte\">Larocade</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1075.5286865234375\" y=\"620.6297607421875\" id=\"e5_texte\">Ville 04</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1075.52880859375\" y=\"731.3453369140625\" id=\"e6_texte\">Chellal</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"902.23486328125\" y=\"620.6297607421875\" id=\"e7_texte\">O.MADHI</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"911.8623046875\" y=\"731.3453369140625\" id=\"e8_texte\">Ville 01</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"757.8232421875\" y=\"620.6297607421875\" id=\"e9_texte\">Mouilha</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"753.009521484375\" y=\"731.3453369140625\" id=\"e10_texte\">Ville05</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"574.90185546875\" y=\"620.6297607421875\" id=\"e11_texte\">Ouanougha</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"589.343017578125\" y=\"731.3453369140625\" id=\"e12_texte\">Indetex</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"406.421630859375\" y=\"620.6297607421875\" id=\"e13_texte\">FORMAGE</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"430.490234375\" y=\"731.3453369140625\" id=\"e14_texte\">Ville 06</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1400.4549560546875\" y=\"620.6297607421875\" id=\"e15_texte\">GARE</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1398.048095703125\" y=\"731.3453369140625\" id=\"e16_texte\">Ville 02</text><text style=\"fill:aqua;font-family:Arial Black;font-size:30.1px;text-anchor:end;text-decoration:underline;\" x=\"1828.8759765625\" y=\"938.3350830078125\" id=\"e17_texte\">TR5</text><text style=\"fill:aqua;font-family:Arial Black;font-size:30.1px;text-anchor:end;text-decoration:underline;\" x=\"1828.8759765625\" y=\"293.2965087890625\" id=\"e18_texte\">TR3</text><text style=\"fill:aqua;font-family:Arial;font-size:28.6px;font-style:normal;font-weight:bold;text-anchor:start;\" x=\"1744.635986328125\" y=\"798.7374267578125\" id=\"e19_texte\">\n    <tspan x=\"1759.0771484375\">05 juil</tspan>\n    <tspan x=\"1759.0771484375\" dy=\"1.25em\">Atelier</tspan>\n  </text><text style=\"fill:aqua;font-family:Arial Black;font-size:30.1px;text-anchor:end;text-decoration:underline;\" x=\"1833.689697265625\" y=\"442.5218200683594\" id=\"e20_texte\">TR4</text>\n  <path d=\"M1872.1994318985421,251.7787224912093h-1513.9141383997642\" style=\"fill:none;stroke:teal;stroke-width:10px;\" id=\"e19_pathH\" />\n  <path d=\"M1875.1162085840624,1032.5034917897183h-1516.7237466168935\" style=\"fill:none;stroke:teal;stroke-width:10px;\" id=\"e1_pathH\" />\n  <path d=\"M363.09900522546,254.78725022518063v779.8221628287077\" style=\"fill:none;stroke:teal;stroke-width:10px;\" id=\"e36_pathV\" />\n  <path d=\"M1870.0935004500147,249.672666143833v782.5299746394738\" style=\"fill:none;stroke:teal;stroke-width:10px;\" id=\"e38_pathV\" />\n</svg>",
        "clickableShapes": [
            {
                "targetId": "#breaker_Ouanougha",
                "action": "click",
                "payload": "#breacker",
                "payloadType": "str",
                "topic": "#breacker"
            },
            {
                "targetId": "#e5_rect",
                "action": "click",
                "payload": "#e5_rect",
                "payloadType": "str",
                "topic": "#e5_rect"
            },
            {
                "targetId": "path[id^=\"breaker_\"]",
                "action": "click",
                "payload": "path[id^=\"breaker_\"]",
                "payloadType": "str",
                "topic": "path[id^=\"breaker_\"]"
            },
            {
                "targetId": "path[id^=\"breaker\"]",
                "action": "click",
                "payload": "path[id^=\"breaker\"]",
                "payloadType": "str",
                "topic": "path[id^=\"breaker\"]"
            }
        ],
        "javascriptHandlers": [],
        "smilAnimations": [],
        "bindings": [
            {
                "selector": "#e5_rect",
                "bindSource": "payload.color",
                "bindType": "attr",
                "attribute": "fill"
            }
        ],
        "showCoordinates": false,
        "autoFormatAfterEdit": true,
        "showBrowserErrors": true,
        "showBrowserEvents": true,
        "enableJsDebugging": true,
        "sendMsgWhenLoaded": true,
        "noClickWhenDblClick": true,
        "outputField": "payload",
        "editorUrl": "http://drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "disabled",
        "zooming": "enabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": true,
        "mouseWheelZoomEnabled": true,
        "dblClickZoomPercentage": 150,
        "cssString": "div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}",
        "name": "HMI-HDR",
        "x": 540,
        "y": 240,
        "wires": [
            [
                "34f8972bc0e42303"
            ]
        ]
    },
    {
        "id": "34f8972bc0e42303",
        "type": "debug",
        "z": "70370e82972416b2",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 710,
        "y": 240,
        "wires": []
    },
    {
        "id": "d8f23cb2e4e67b13",
        "type": "inject",
        "z": "70370e82972416b2",
        "name": "",
        "props": [
            {
                "p": "payload.color",
                "v": "red",
                "vt": "str"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "databind",
        "x": 380,
        "y": 240,
        "wires": [
            [
                "b546d85c72cb1a50"
            ]
        ]
    },
    {
        "id": "9bcb92fcaf773f25",
        "type": "ui_group",
        "name": "Home",
        "tab": "a523fe9738055327",
        "order": 1,
        "disp": false,
        "width": "24",
        "collapse": false,
        "className": ""
    },
    {
        "id": "a523fe9738055327",
        "type": "ui_tab",
        "name": "Ps30Kv-HDR",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
2

I fixed event probleme but
binding I cant fix that
and I am use this exmple and nothink

3

Hi @d0d04m3,
sorry for the delay. Was a bit too busy last evenings with other stuff.

I have imported that example flow again, to make sure it still works with the last version of the SVG node. And here everything works fine: when I click on the inject node, the message is being injected and the colors and texts are updated. Exactly as demonstrated in the animation on thar readme page.

So in order to be able to help you, you will need to give me some more details:

  • Node-RED version

  • Dashboard version

  • Operating system (windows, linux...)

  • Browser (chrome, ...)

  • Do you see errors in your Node-RED log or in the browser console log (via your browser developer tools)?

  • Do you see any errors in your "Debug" sidebar (in the flow editor) when you activate this checkbox, deploy and inject your messages again:

    image

  • Other useful information?

4

Yes thanks I removed and design aging with last version drawnsvg
So maybe the old version not worked any more because am used drawnsvg local node

So event binding animation js event work for me and fixed all my issues but I have some trouble
clearsetinterval() function inside js event not worked
And I can't remove js event via cmd
And add/remove animation via cmd
Not found in wiki or doc
This version support this future or not ?

5

Don't know what could have go wrong, because I don't really have time to follow up the Drawsvg developments. But from his release notes I see that some animation stuff has been changed. Not sure if that will solve your problem.

Anyway I have published version 1.3.0 in the palette:

image

This one will offer you DrawSvg version 9.5 instead of 8.0.

Can you explain what you want to achieve, and also the code that you have tried?

See in the documentation how to add and remove js events.

No that is indeed currently not possible

6

ok so
new version of svgdraw its limited and required expert mode so your need key for activated
And old version not works for me

And clearinterval() method clears a timer set with the setinterval().
So I created inputs msg js event
When receive "start" payload
Run this loop
MyTimeloop = setInterval("my function", millseconds);
And if receive "stop"
Call the clearinterval() method to stop the executing MyTimeloop
clearinterval(MyTimeloop)
So when I send start its work but if send stop and call clearinterval()
Nothing happened
MyTimeloop not stopped

And more issues if add js event with cmd
For event I need use Input msg
But I see error:
The msg.payload.event unsupported JavaScript event name and trays with
Input msg
inputmsg
input
But all its filed
And same issus for selector
If keep empty I see error
How to add input msg js event with cmd

7

I have installed the latest drawsvg node version locally, and I have no problem at all using it. So I have no idea what you mean. I cannot help you, unless you provide some more details about I can reproduce the problem easily...

I have created tonight a wiki page with a tutorial, which explains how to use the AngularJs $scope object to store a reference to your client-side Js timer:

demo_js_timer

Can you please share a "simplified" version of your flow, containing : the mimimal SVG required, the JS event handler with your JS code, the inject nodes that inject your message. So only the basics required to reproduce your problem. Otherwise I have to guess what you are doing wrong, which costs me a lot of my precious free time.

8

issus with version

9-5 2021/11

  • Splitting features into 2 profiles (basic,expert) with google and patreon login

Thank you for your interest in drawsvg.

You can evaluate the expert profile of drawsvg for a period of 10 days of use .

  • To evaluate the expert profile, log in with your google or patreon account.
  • Beyond the trial period, you can subscribe to drawsvg patreon to use the expert profile.

Try the expert profile of drawsvg.

If you have an expert access code , enter it to switch to the expert profile.

Your current drawsvg user profile is basic .

so how to activat expret profile
and local svg node same issuse
other truble

[
    {
        "id": "57a8b96d9110af8e",
        "type": "inject",
        "z": "460be7b6fe8595e1",
        "name": "remove",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{\"command\":\"remove_js_event\",\"event\":\"Inputmsg\",\"selector\":\"\"}",
        "payloadType": "json",
        "x": 200,
        "y": 240,
        "wires": [
            [
                "bb93fff5.927ba"
            ]
        ]
    },
    {
        "id": "4de069ee748477dc",
        "type": "inject",
        "z": "460be7b6fe8595e1",
        "name": "Add",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{\"command\":\"add_js_event\",\"event\":\"inputmsg\",\"selector\":\"\",\"script\":\"debugger; var color = \\\"red\\\"; if (msg.topic == \\\"triggrt\\\"){setInterval(function(){ if (color == \\\"red\\\") {color = \\\"blue\\\"} else color = \\\"red\\\"$(\\\"#camera_living\\\").css(\\\"fill\\\", color);}, 1000);}\"}",
        "payloadType": "json",
        "x": 190,
        "y": 200,
        "wires": [
            [
                "bb93fff5.927ba"
            ]
        ]
    },
    {
        "id": "6f738ec01629dd16",
        "type": "inject",
        "z": "460be7b6fe8595e1",
        "name": "trigger",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "trigger",
        "payloadType": "date",
        "x": 440,
        "y": 140,
        "wires": [
            [
                "bb93fff5.927ba"
            ]
        ]
    },
    {
        "id": "bb93fff5.927ba",
        "type": "ui_svg_graphics",
        "z": "460be7b6fe8595e1",
        "group": "997e40da.b5acc",
        "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  <text id=\"banner\" x=\"10\" y=\"16\" fill=\"black\" stroke=\"black\" font-size=\"35\" text-anchor=\"left\" alignment-baseline=\"middle\" stroke-width=\"1\">This is the #banner</text>\n  <circle id=\"pir_living\" cx=\"310\" cy=\"45\" r=\"1\" stroke-width=\"1\" fill=\"#FF0000\" />\n  <text id=\"camera_living\" x=\"310\" y=\"45\" font-family=\"FontAwesome\" fill=\"grey\" stroke=\"black\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\"></text>\n</svg> ",
        "clickableShapes": [
            {
                "targetId": "#camera_living",
                "action": "click",
                "payload": "camera_living",
                "payloadType": "str",
                "topic": "camera_living"
            }
        ],
        "javascriptHandlers": [],
        "smilAnimations": [
            {
                "id": "myAnimation",
                "targetId": "pir_living",
                "classValue": "all_animation",
                "attributeName": "r",
                "transformType": "rotate",
                "fromValue": "1",
                "toValue": "30",
                "trigger": "msg",
                "duration": "500",
                "durationUnit": "ms",
                "repeatCount": "0",
                "end": "restore",
                "delay": "1",
                "delayUnit": "s",
                "custom": "camera_living.click; "
            },
            {
                "id": "textRotate",
                "targetId": "banner",
                "classValue": "all_animation",
                "attributeName": "visibility",
                "transformType": "rotate",
                "fromValue": "visible",
                "toValue": "hidden",
                "trigger": "msg",
                "duration": "1",
                "durationUnit": "s",
                "repeatCount": "0",
                "end": "restore",
                "delay": "1",
                "delayUnit": "s",
                "custom": ""
            },
            {
                "id": "cameraColoring",
                "targetId": "camera_living",
                "classValue": "all_animation",
                "attributeName": "fill",
                "transformType": "rotate",
                "fromValue": "blue",
                "toValue": "lime",
                "trigger": "msg",
                "duration": "500",
                "durationUnit": "ms",
                "repeatCount": "0",
                "end": "restore",
                "delay": "1",
                "delayUnit": "s",
                "custom": ""
            }
        ],
        "bindings": [
            {
                "selector": "#banner",
                "bindSource": "payload.title",
                "bindType": "text",
                "attribute": ""
            },
            {
                "selector": "#camera_living",
                "bindSource": "payload.position.x",
                "bindType": "attr",
                "attribute": "x"
            },
            {
                "selector": "#camera_living",
                "bindSource": "payload.camera.colour",
                "bindType": "attr",
                "attribute": "fill"
            }
        ],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": true,
        "showBrowserEvents": true,
        "enableJsDebugging": true,
        "sendMsgWhenLoaded": false,
        "noClickWhenDblClick": false,
        "outputField": "",
        "editorUrl": "//drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "disabled",
        "zooming": "disabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": false,
        "mouseWheelZoomEnabled": false,
        "dblClickZoomPercentage": "150",
        "cssString": "div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}",
        "name": "",
        "x": 360,
        "y": 320,
        "wires": [
            [
                "c997135f.8035f"
            ]
        ]
    },
    {
        "id": "c997135f.8035f",
        "type": "debug",
        "z": "460be7b6fe8595e1",
        "name": "Floorplan output",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "x": 460,
        "y": 360,
        "wires": []
    },
    {
        "id": "997e40da.b5acc",
        "type": "ui_group",
        "name": "Floorplan test",
        "tab": "95801a22.bd5f18",
        "order": 1,
        "disp": true,
        "width": "14",
        "collapse": false
    },
    {
        "id": "95801a22.bd5f18",
        "type": "ui_tab",
        "name": "SVG",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]
9

Ok seems DrawSvg now offers two different profiles.
I now will continue guessing: the problem is that you want to have the expert mode, which is available via the profile icon in the right-top of the online editor (via drawsvg.org). But that profile icon is not available when you access the same DrawSvg editor via Node-RED:

image
image813×158 7.46 KB

Is that the problem? If so, you could have save me a lot of my free time by explaining it simply like this...

Since you seem to like short descriptions, I will continue in your style:

image
image898×198 13.5 KB