Search code examples
svgcss-animationssvg-animate

SVG straight line animation

I have two lines red and blue, where blue line moves along the red line. I want the blue line to move up and down across the red line.Here it is moving only upwards. Below is the code

<!DOCTYPE html>
<html>
<head><title></title>

</head>
<body>
	<svg height="210" width="500">
	<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
	<line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2">
		<animateTransform attributeName="transform"
      type="translate"
      from="200 200"
      to="-150 -150"
      begin="0s"
      dur="5s"
      repeatCount="indefinite"
    />
	</line>
	</svg>


	
</body>
</html>

Solution

  • Something like this perhaps?

    <!DOCTYPE html>
<html>
<head><title></title>

</head>
<body>
	<svg height="210" width="500">
	<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
	<line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2">
		<animateTransform attributeName="transform"
      type="translate"
      values="200 200;-150 -150;200 200"
      begin="0s"
      dur="5s"
      repeatCount="indefinite"
    />
	</line>
	</svg>


	
</body>
</html>