Why doesn't SVG animation work when added using JavaScript?

S

Svyatoslav Khusamov2018-07-14 22:06:03

SVG

Svyatoslav Khusamov, 2018-07-14 22:06:03

Code in sandbox
https://jsfiddle.net/khusamov/3np7zheq/
Index.html file

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

$(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" 
    />
  `);
});

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2018-07-14
@khusamov

works