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.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Can I make a small ball move along the line in the SVG picture in Mango?


  • I want to show the direction of flow of a vector on a line segment. Can I make a small ball move along the line or path in the SVG picture in Mango? Has anyone implemented a similar function like this in ma-SVG?


  • 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.!
    0_1576303107054_20191214165753.png