CODEWITHSUNDEEP
javascripthtmlsvg
Code Pope
Code Pope

Reputation: 5449

SVG: redundant circle when using animateMotion

I am using animateMotion to have an animation on my path. Here is the simple code:

<!DOCTYPE html>
<html>
  
<head>
<title>Example Of Many Things!</title>
</head>
 
<body>
    <svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
            <g id="3" class="cluster loop-node">   
            </g>        
            <g id="4" class="node cu-node">        
                <path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
                <text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
            </g>
        
            <g id="5" class="node cu-node">        
                <path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
                <text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
            </g>

            <g id="4t5" class="edge">        
            <path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
            <polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>

                <g id="6" class="node cu-node">        
                    <path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
                    <text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
                </g>
            <g id="5t6" class="edge">
                <path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
                <polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
            </g>
        </g>
    </svg>
</body>
    <script type="text/javascript">
	var g8t3 = document.getElementById('4t5');
	var path = document.getElementById('4t5').getElementsByTagName('path')[0]
	path.setAttribute("id", "path4t5");
	var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation4t5" dur="3s"  begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5"></mpath></animateMotion></circle>'
	g8t3.insertAdjacentHTML( 'beforeend', circleAnim );

	// // now move circle on the path 
	var g8t4 = document.getElementById('5t6');
	var path = document.getElementById('5t6').getElementsByTagName('path')[0]
	path.setAttribute("id", "path5t6");
	var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation5t6" dur="3s"  begin="myMoveAnimation4t5.end"><mpath xlink:href="#path5t6"></mpath></animateMotion></circle>'
	g8t4.insertAdjacentHTML( 'beforeend', circleAnim );
</script></html>

As you can see, there is a green circle on the path which is moving, which is correct.
But there is something weird: There is also another green circle on the left bottom of the graph, which is redundant. I don't how it appears and how I can get rid of it.
Any help?

Upvotes: 0

Views: 59

Answers (1)

Kaiido
Kaiido

Reputation: 136707

Instead of appending two circles in your svg, append the two <animateMotion>s inside a single circle. Also, you'll probably want to set your <animationMotion>'s fill attribute to "fill".

As you wrote it, when your circles are in idle state, they will come back to their initial position (unset).

var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = '<circle r="1" fill="green">' +
  // first part of the anim
  '<animateMotion id="myMoveAnimation4t5" dur="3s"  begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5" fill="freeze"></mpath></animateMotion>' +
  // second part of the anim
  '<animateMotion id="myMoveAnimation5t6" dur="3s"  begin="myMoveAnimation4t5.end" fill="freeze"><mpath xlink:href="#path5t6"></mpath></animateMotion>' +
  '</circle>'
g8t3.insertAdjacentHTML('beforeend', circleAnim);
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
            <g id="3" class="cluster loop-node">   
            </g>        
            <g id="4" class="node cu-node">        
                <path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
                <text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
            </g>
        
            <g id="5" class="node cu-node">        
                <path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
                <text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
            </g>

            <g id="4t5" class="edge">        
            <path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
            <polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>

                <g id="6" class="node cu-node">        
                    <path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
                    <text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
                </g>
            <g id="5t6" class="edge">
                <path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
                <polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
            </g>
        </g>
       </g>
    </svg>

Upvotes: 2

Related Questions