Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

I know something like this can create a ball to move along the path. </ma-svg> </div> <style type="text/css" > .ball { width: 15px; height: 5px; background-color: red; border-radius: 50%; offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80'); offset-distance: 0%; animation: red-ball 2s linear alternate infinite; } @keyframes red-ball { from { offset-distance: 0%; } to { offset-distance: 100%; } } </style> <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path> </svg> <div class="ball"></div> But what if I want to let the ball move along a path in my SVG (the path is complicated can not write it out as a single Line coordinates)? And this is what the line looks like.! [image: x8JslV1.png]

@zhilin-chen said in Why this kind of <style> can not work?: @thomaseinasto said in Why this kind of <style> can not work?: !important Yes!! It finally works!!! Thank you so much!! Be careful using !important everywhere, it makes it hard to override elsewhere. Follow my instructions above and read this article - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity