khusamov
@khusamov
ReactJS, NodeJS, TypeScript, Sencha ExtJS

Почему не работает SVG-анимация, если ее добавлять средствами JavaScript?

Код в песочнице
https://jsfiddle.net/khusamov/3np7zheq/

Файл index.html

<!DOCTYPE html>
<html>

	<head>
		<title>Пробуем SVG-анимации</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1"/> 
		<script src="https://yastatic.net/jquery/3.1.1/jquery.min.js"></script>
		<script src="index.js"></script>
	</head>

	<body style="margin: 0; padding: 0;">

		<svg width="100%" height="100%">
			<rect x="600" y="50" width="100px" height="150px" class="elevator"></rect>

			<circle class="my-circle" r="30" cx="50" cy="50" fill="orange" />


		</svg>

	</body>

</html>


Файл index.js


$(function() {
	$('svg rect.elevator').append(`
		<animate 
			attributeName="x"
			from="600"
			to="50" 
			dur="1s"
			begin="0s"
			fill="freeze"
		/>
	`);
	$('svg circle.my-circle').append(`
		<animate 
			attributeName="cx"
			from="50"
			to="450" 
			dur="1s"
			begin="0s"
			fill="freeze" 
		/>
	`);
});
  • Вопрос задан
  • 290 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы