# Animation - Not working

**URL:** <https://discourse.nodered.org/t/animation-not-working/72875>\
**Category:** Industrial\
**Tags:** node-red-dashboard\
**Created:** [29 December 2022 10:16 UTC](https://discourse.nodered.org/t/animation-not-working/72875 "2022-12-29T10:16:46Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [29 December 2022 10:16 UTC](https://discourse.nodered.org/t/animation-not-working/72875/1 "2022-12-29T10:16:46Z")

</div>

Hi Node-Red,

I am new to Node-Red and I am working on creating a dashboard to control the hydraulic system.  
I created an animation for a hydraulic cylinder and it works perfectly when it is placed in a stand alone svg image, like this,  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b0f19949d1fa4b7e6a2fddf98cf1cd01083b16e9.png)

I created a hydraulic circuit diagram by incorporating various svg images, like this,

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/0250036ed1d12eec617e7ba8763295726a291d83.png)

After incorporating `hydraulic cylinder` into my circuit diagram , animation is not working. I am getting this error.

```auto
msg : string[93]
"Invalid selector. No SVG elements found for selector #head-1(msg._msgid = '1d2f4a347810eb82')"
29/12/2022, 3:28:36 pmnode: djsvg
msg : string[93]
"Invalid selector. No SVG elements found for selector #tail-1(msg._msgid = '1d2f4a347810eb82')"
29/12/2022, 3:28:37 pmnode: djsvg
msg : string[93]
"Invalid selector. No SVG elements found for selector #head-2(msg._msgid = '1d2f4a347810eb82')"
29/12/2022, 3:28:38 pmnode: djsvg
msg : string[93]
"Invalid selector. No SVG elements found for selector #tail-2(msg._msgid = '1d2f4a347810eb82')"

```

**My observation,**  
1.If I enter `target-id`'s name as `animation id `. Not getting any errors and animation is not working.  
2. If I enter a different name for `animation id` other than `target id`,I am getting an error and the animation is not working.

Please provide your comment

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 December 2022 10:57 UTC](https://discourse.nodered.org/t/animation-not-working/72875/2 "2022-12-29T10:57:56Z")

</div>

Hi @Talkatoo,  
I assume you use the node-red-contrib-ui-svg node for this? If so, please share a simplified flow (only including the Inject node and an svg node) here, then I will have a look.  
Bart

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [2 January 2023 06:13 UTC](https://discourse.nodered.org/t/animation-not-working/72875/3 "2023-01-02T06:13:33Z")

</div>

Hi @BartButenaers ,

Thanks for your response...  
Sorry for delayed reply.

Actually, my code size exceeded the allowed limit in the node-red forum. So I am able to share the code and getting error here ,

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e84655cf93009e853756b9c813fa118e83ba560b.png)

FYR, I have share my code here [Paste.ee - code flow](https://paste.ee/p/4cNvl) . Please view it.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [2 January 2023 22:52 UTC](https://discourse.nodered.org/t/animation-not-working/72875/4 "2023-01-02T22:52:25Z")

</div>

@Talkatoo,  
The injected message is quite large, and I get a large series of errors when injecting it into the SVG node. I thought your question was about an animation? But not sure anymore, because your flow contains lots of errors.

It would be best if you fix all the issues in your flow, share the flow again and explain a bit more in detail what still doesn't work.

About fixing the flow, I will give an example of one (of the many) errors I get:

1. You inject this:

2. But since there is no element in your svg with `id="bp1`:

3. So you get this error:

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [3 January 2023 06:28 UTC](https://discourse.nodered.org/t/animation-not-working/72875/5 "2023-01-03T06:28:54Z")

</div>

@BartButenaers ,,

Actually, `SVG Editor` appending some extra character to my object ID. When I creating new pipe, I have edited/added name as `bp-1` for my pipes using Abode Illustrator.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9ee32a9885954be68350f246f35d224d5b1fde6a.png)  
But I am observing `bp-1-4` in `SVG Editor`.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d73581824649fcc3df27f00ce81a8a0252ee4a26.png)  
I don't know how extra character is appended.

As of now, I removed the extra character in object ID. I am not seeing issue. Still, my node-red inject node is not able to locate the animation ID. I am getting error like this.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/877d62bb0573509647caee5c24c81a7f652a1831.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0d5500ed055376d9818546a223d114aa0d62887d.png)

FYR, **new updated code** [Paste.ee - code flow 1](https://paste.ee/p/QE8wB)

I have created animation for my hydraulic cylinder using node-red Flow.

```auto
[
    {
        "id": "7b5dc595967afb31",
        "type": "debug",
        "z": "dd6662b64540bd5f",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 420,
        "y": 640,
        "wires": []
    },
    {
        "id": "460b749017bbec94",
        "type": "ui_svg_graphics",
        "z": "dd6662b64540bd5f",
        "group": "5dd24274.e5a58c",
        "order": 2,
        "width": "24",
        "height": "14",
        "svgString": "<svg xmlns:osb=\"http://www.openswatchbook.org/uri/2009/osb\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 595.280029296875 841.8900146484375\" style=\"enable-background:new 0 0 595.28 841.89;\" xml:space=\"preserve\" sodipodi:docname=\"vector_cylinder2.svg\" inkscape:version=\"0.92.1 r15371\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"595.280029296875\" height=\"841.8900146484375\" style=\"fill:none;stroke:none;\" />\n <metadata id=\"metadata19\">\n <rdf:RDF>\n <cc:Work rdf:about=\"\">\n <dc:format>image/svg+xml</dc:format>\n <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\n </cc:Work>\n </rdf:RDF>\n </metadata>\n <defs id=\"defs17\">\n <linearGradient id=\"linearGradient936\" osb:paint=\"solid\">\n <stop style=\"stop-color:#8d3092;stop-opacity:1;\" offset=\"0\" id=\"stop934\" />\n </linearGradient>\n </defs>\n <sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1366\" inkscape:window-height=\"705\" id=\"namedview15\" showgrid=\"false\" inkscape:zoom=\"0.28032165\" inkscape:cx=\"-282.0512\" inkscape:cy=\"420.94501\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"g12\" />\n <style type=\"text/css\" id=\"style2\">\n .st0\n {}\n\n .st1\n {\n fill: #414042;\n }\n </style>\n <g id=\"g12\" transform=\"matrix(3.299456,0,0,2.1672893,-617.67818,-416.58455)\">\n <path id=\"piston-head\" class=\"st0\" d=\"m326.19,338.11h-74.76v-19.66h74.76v19.66m4.79,3.96V314.5h-84.34v27.57Z\" inkscape:connector-curvature=\"0\" style=\"fill-opacity: 1;\" fill=\"#963092\" />\n <path id=\"piston-tail\" class=\"st0\" d=\"M298.47,502.67H282.04V342.55h16.43v160.12m4.79,3.95V338.6h-26.01v168.03h26.01Z\" inkscape:connector-curvature=\"0\" style=\"fill-opacity: 1;\" fill=\"#963092\" />\n <polygon class=\"st1\" points=\"240.72,470.15 273.38,470.15 273.38,466.24 245.45,466.24 245.45,284.39 332.15,284.39 332.15,466.24 307.12,466.24 307.12,470.15 336.88,470.15 336.88,280.48 240.72,280.48 \" id=\"polygon6\" style=\"fill:#414042\" />\n <rect x=\"223.39999\" y=\"441.09\" transform=\"rotate(90,225.8111,455.6814)\" class=\"st1\" width=\"4.8200002\" height=\"29.18\" id=\"rect8\" style=\"fill:#414042\" />\n <rect x=\"223.39999\" y=\"280.25\" transform=\"rotate(90,225.81105,294.83715)\" class=\"st1\" width=\"4.8200002\" height=\"29.18\" id=\"rect10\" style=\"fill:#414042\" />\n </g>\n</svg>",
        "clickableShapes": [],
        "javascriptHandlers": [],
        "smilAnimations": [
            {
                "id": "move_head",
                "targetId": "piston-head",
                "classValue": "",
                "attributeName": "transform",
                "transformType": "translate",
                "fromValue": "0,2",
                "toValue": "0,50",
                "trigger": "msg",
                "duration": "7",
                "durationUnit": "s",
                "repeatCount": "1",
                "end": "restore",
                "delay": "1",
                "delayUnit": "s",
                "custom": ""
            },
            {
                "id": "move_tail",
                "targetId": "piston-tail",
                "classValue": "",
                "attributeName": "transform",
                "transformType": "translate",
                "fromValue": "0,0",
                "toValue": "0,50",
                "trigger": "msg",
                "duration": "7",
                "durationUnit": "s",
                "repeatCount": "1",
                "end": "restore",
                "delay": "1",
                "delayUnit": "s",
                "custom": ""
            }
        ],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": true,
        "showBrowserErrors": true,
        "showBrowserEvents": false,
        "enableJsDebugging": true,
        "sendMsgWhenLoaded": false,
        "noClickWhenDblClick": false,
        "outputField": "payload",
        "editorUrl": "http://127.0.0.1:1880/drawsvg_local/edrawsvg.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;\n}\ndiv.ui-svg path {\n fill: inherit;\n}",
        "name": "",
        "x": 440,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "0b767bc1d6f02a33",
        "type": "ui_button",
        "z": "dd6662b64540bd5f",
        "name": "",
        "group": "5dd24274.e5a58c",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Start Cylinder",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "[{\"command\":\"update_style\",\"selector\":\"#piston\",\"attributeName\":\"fill\",\"attributeValue\":\"#3AF000\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_head\",\"action\":\"start\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_tail\",\"action\":\"start\"}]",
        "payloadType": "json",
        "topic": "topic",
        "topicType": "msg",
        "x": 80,
        "y": 560,
        "wires": [
            [
                "460b749017bbec94"
            ]
        ]
    },
    {
        "id": "ee8c8551ac7b51f7",
        "type": "inject",
        "z": "dd6662b64540bd5f",
        "name": "Trigger the cylinder ",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"command\":\"update_style\",\"selector\":\"#piston-head\",\"attributeName\":\"fill\",\"attributeValue\":\"#3AF000\"},{\"command\":\"update_style\",\"selector\":\"#piston-tail\",\"attributeName\":\"fill\",\"attributeValue\":\"#3AF000\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_head\",\"action\":\"start\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_tail\",\"action\":\"start\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_head\",\"action\":\"start\"}]",
        "payloadType": "json",
        "x": 110,
        "y": 640,
        "wires": [
            [
                "460b749017bbec94",
                "7b5dc595967afb31"
            ]
        ]
    },
    {
        "id": "5dd24274.e5a58c",
        "type": "ui_group",
        "name": "dj_dashboard_group",
        "tab": "c07e0049.90e8a",
        "order": 1,
        "disp": true,
        "width": "24",
        "collapse": false,
        "className": ""
    },
    {
        "id": "c07e0049.90e8a",
        "type": "ui_tab",
        "name": "dj_sample",
        "icon": "dashboard",
        "order": 19,
        "disabled": false,
        "hidden": false
    }
]

```

Animation is working perfectly in above svg code/image. When I included this svg image in my main wire diagram, animation is not working.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 January 2023 20:26 UTC](https://discourse.nodered.org/t/animation-not-working/72875/6 "2023-01-03T20:26:26Z")

</div>

> [@Talkatoo](#):
>
> I have created animation for my hydraulic cylinder using node-red Flow.

Yes indeed your animation works fine when I click the inject node, because there you are using the correct id's:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e2e74e97d4c5c34fe4c7b41c0f62a7d8ef29be9a.png)

However when I click on the "Start cylinder" button in the dashboard, then I get again:  
`"Invalid selector. No SVG elements found for selector #piston"`  
The reason is because in the Button-node you use the incorrect id again:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/4358a3ce1ebe4edfc556d6110891e3d82aa58ff9.png)

> [@Talkatoo](#):
>
> As of now, I removed the extra character in object ID.

Well I have no idea how the extra characters get there. But you can do all kind of nice stuff with the _ **CSS selectors** _, that the SVG node uses to select elements.

For example when you google for _"css selector id starts with"_ then you would find that the CSS selector `[id^=piston]` means _"select all elements whose id starts with piston"_.

As a result instead of specifying the id of each part of your piston separately:

```auto
[ {
      "command": "update_style",
      "selector": "#piston-head",
      "attributeName": "fill",
      "attributeValue": "#3AF000"
  },
    {
        "command": "update_style",
        "selector": "#piston-tail",
        "attributeName": "fill",
        "attributeValue": "#3AF000"
    }
]

```

You can also execute this command on all elements of your piston:

```auto
    {
        "command": "update_style",
        "selector": "[id^=piston]",
        "attributeName": "fill",
        "attributeValue": "#3AF000"
    }

```

Then your animation still works, but your input messages will be easier to manage:

![piston_demo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4ae5870321c7f4ef177f1521161071e8a70ddaaa.gif)

And it also doesn't matter if there some unexpected number added to your id's. You can simply ignore it in your CSS selector...

> [@Talkatoo](#):
>
> FYR, **new updated code** [Paste.ee - code flow 1](https://paste.ee/p/QE8wB)

Unfortunately your link contains only your svg, and not your exported flow. So I cannot test that.

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [4 January 2023 05:33 UTC](https://discourse.nodered.org/t/animation-not-working/72875/7 "2023-01-04T05:33:26Z")

</div>

> [@BartButenaers](#):
>
> Unfortunately your link contains only your svg, and not your exported flow. So I cannot test that.

Sorry, I mistakenly included the svg file instead of flow. I have shared the correct flow here, [Paste.ee - code flow 2](https://paste.ee/p/Y8UBl)

I can't move the arrow in the SVG image to show the direction of fluid.

Please view it and provide your comments.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 January 2023 06:25 UTC](https://discourse.nodered.org/t/animation-not-working/72875/8 "2023-01-05T06:25:57Z")

</div>

> [@Talkatoo](#):
>
> I can't move the arrow in the SVG image to show the direction of fluid.

Well it would have helped if you had provided a "minimal" not-working flow, because I have not enough time to analyze for everybody what is going wrong their complete flow...

So I haven't looked through your entire flow to see which arrow your are referring to, but I assume you mean this animation in your injected message?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe4cc734782c032c988424411f7ee9fa2a56456b.png)

I can only repeat what I said already above. When I search in your SVG for this id, it doesn't exist:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af0e2ba01c6ac66bf6bdf1fb517ac14a3868fc10.png)

So it wouldn't be able to find that element...

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [5 January 2023 07:01 UTC](https://discourse.nodered.org/t/animation-not-working/72875/9 "2023-01-05T07:01:34Z")

</div>

@BartButenaers ..

Actually `move-head-2` is my animation ID and svg id is `piston-head-2`. I dont' know why my flow is not able to locate the svg object ID for mentioned animation id (in `Animate`tab). Once I add the animation ID will it be reflected in SVG code (which is embedded in node-red) ?.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a38eb52a6f8f264c9111b30abcc71420a94e1c1b.png)

I am expecting when I refer `move-head-2` in my code flow, node red will automatically point `piston-head-2`.. Please correct me if my assumption are wrong.

FYI, if I mention `object ID(Target Element Id)` name to Animation ID, I am not getting any error, but animation is not happening.

> [@BartButenaers](#):
>
> Well it would have helped if you had provided a "minimal" not-working flow, because I have not enough time to analyze for everybody what is going wrong their complete flow...

Animation is working when it is a stand alone svg image. After incorporating(stand alone svg image) in to my main hydraulic circuit diagram (SVGimage), Hydraulic Cylinder's animation is not working. I don't know why flow is able to fetch the animation ID.

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [8 January 2023 14:08 UTC](https://discourse.nodered.org/t/animation-not-working/72875/10 "2023-01-08T14:08:10Z")

</div>

@BartButenaers and `Node-Red forum`..sorry to disturb you. As I am new to node-red, JS and SVG concepts. I am working to fix the issue. Please provide your comments, it will be helpful in my development activity.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 January 2023 20:01 UTC](https://discourse.nodered.org/t/animation-not-working/72875/11 "2023-01-08T20:01:44Z")

</div>

@Talkatoo,

Seems that you have hit a bug. This is what happens:

1. You have an empty Javascript eventhandler added:

2. In the frontend code, the `querySelectorAll` function will be called with that empty selector:

3. Seems that - instead of returning no elements - the function fails with an exception, as you can see in the browser console log:

4. As a result the next code statements won't be executed anymore. Which means your animations (which you had added via the config screen), won't be added to your SVG drawing.

5. As a result, you cannot find your animation via your selector:

6. So your animation won't start.

When I remove that empty Javascript event handler, then your animation starts:

![animation_bug](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a429ba45a700a033da54f2134f3da1dad432f2c1.gif)

Seems it is going into the wrong direction, but I will leave that up to you.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 January 2023 20:02 UTC](https://discourse.nodered.org/t/animation-not-working/72875/12 "2023-01-08T20:02:54Z")

</div>

BTW that is a really nice drawing. It would be nice if you could share how you created something like that. Because I think this might be interesting for other community members...

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [9 January 2023 14:38 UTC](https://discourse.nodered.org/t/animation-not-working/72875/13 "2023-01-09T14:38:36Z")

</div>

@BartButenaers .. Thanks you very much for help and technicial input. ..

> [@BartButenaers](#):
>
> BTW

Following are steps involved in developing hydraulic drawings,

1. Actually, I downloaded images from Freepik (which has .eps format).
2. I am using Adobe illustrator to edit the downloaded image, rename the path ID and save it as an SVG image.
3. I incorporated all my images in Inkscape and developed hydraulic wire diagram.
4. For node-red implementation, I followed old issues discussed in this forum.

I am facing these issues.  
1.I am observing my circuit diagram and some images are obscured (in Browser). Why is it ?  
2. In my hydraulic animation, once the piston reaches ends,it abruptly comes back to starting place instead of slowly(they way went down).

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [9 January 2023 19:32 UTC](https://discourse.nodered.org/t/animation-not-working/72875/14 "2023-01-09T19:32:31Z")

</div>

> [@Talkatoo](#):
>
> some images are obscured (in Browser). Why is it ?

Can you explain that a bit more?

> [@Talkatoo](#):
>
> 1. In my hydraulic animation, once the piston reaches ends,it abruptly comes back to starting place instead of slowly(they way went down)

I assume you can use a combination of the `values` and corresponding `keyTimes`, to say which value you want at which moment (like in [this](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyTimes) example). But perhaps you can do it another way. I haven't used animations myself, but there are a huge number of tutorials/videos available on the web.

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [12 January 2023 14:00 UTC](https://discourse.nodered.org/t/animation-not-working/72875/15 "2023-01-12T14:00:18Z")

</div>

> [@BartButenaers](#):
>
> bit

@BartButenaers , Sorry for late reply.  
My actual svg image look like this,

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/1717c2b8a5cf8afba2c581893e3e7b25630c4c60.png)

In node-red output, color quality is decreased and clear, like this,

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/63adbbac7acf7ffd8e69636504db98ea012e85fa.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [12 January 2023 18:22 UTC](https://discourse.nodered.org/t/animation-not-working/72875/16 "2023-01-12T18:22:43Z")

</div>

check the opacity of the affected objects, also perhaps the layer and move them to the top if something is above them ?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 January 2023 20:08 UTC](https://discourse.nodered.org/t/animation-not-working/72875/17 "2023-01-12T20:08:25Z")

</div>

I think that @Sean-McG is right...

1. Right click on one of the SGV shapes that have a bad color in the dashboard:

2. You can see that your shape is an SVG _ **path** _ (highlighted in light blue), and in the right _"Style"_ tab you can see that it has the correct orange fill color that you want:

3. When I manually add an _ **opacity** _ attribute, the correct color indeed appears in your drawing:

Not sure what could case this. So everybody is welcome to provide tips!

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [19 January 2023 13:11 UTC](https://discourse.nodered.org/t/animation-not-working/72875/18 "2023-01-19T13:11:34Z")

</div>

@BartButenaers and @Sean-McG , thanks for the info ..

I have added `opactiy` in CSS file itself.  
After adding code like this (in settings -\>.CSS ), I am observing that my hydraulic diagram glowing with actual color,

```auto
    color: var(--nr-dashboard-widgetColor);
    fill: currentColor ;
    opacity: initial;
}
div.ui-svg path {
    fill: inherit;
  opacity: initial;
}

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/faee0968083c1a4d1a204d9fe918194e31e7631b.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [20 January 2023 13:50 UTC](https://discourse.nodered.org/t/animation-not-working/72875/19 "2023-01-20T13:50:21Z")

</div>

Thanks for sharing your workaround!  
And glad that it now works...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 March 2023 13:50 UTC](https://discourse.nodered.org/t/animation-not-working/72875/20 "2023-03-21T13:50:47Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.