SVG прямолинейная анимация

У меня есть две линии, красная и синяя, где синяя линия движется по красной линии. Я хочу, чтобы синяя линия двигалась вверх и вниз по красной линии, а здесь она движется только вверх. Ниже приведен код

<!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>


svg css-animations svg-animate
person Anusha Sajeendran    schedule 08.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, что-то вроде этого?

<!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>

person Robert Longson    schedule 08.06.2016
comment
Можно ли динамически изменять координаты x y и значения для разных разрешений с помощью css или jquery ...? Я обнаружил, что только штрихи можно изменять динамически ... - person Anusha Sajeendran; 10.06.2016
comment
Только с css нет. Возможно с помощью jquery. Задайте отдельный вопрос, и кто-нибудь может дать ответ. - person Robert Longson; 10.06.2016
comment
Вы можете использовать $( window ).height() > / < / = для проверки и установки соответственно высоты и ширины svg и координат. - person SiddP; 20.06.2016