Код в песочнице
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"
/>
`);
});
Простой
