Question

我有一个包含多个多边形和路径的svg图像文件。我想在我的网页中随机显示这些多边形，并创建一个动画，将它们补间到svg文件中的位置。总而言之，我想展示和展开svg并为其动画以重建自身。

我已经搜索了这样做的方法，但是我找不到从svg文件中获取位置作为目的地而不是源的方法。

你知道我怎么能这样做吗？

编辑：这是我目前的情况：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/styles.css">
    <script type="text/javascript" src="../assets/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
</head>

<body id="main">


    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <svg version="1.1" width="1080" height="720" viewBox="0 0 1080 720">
    <style type="text/css">
      .st1{fill:#F8971D;}
      .st2{fill:#8DC63F;}
      .st3{fill:#00A18E;}
    </style>
    <g>
      <polygon class="st1" points="462.8,224.2 451.7,246.1 495.1,261.9  "/>
    </g>
    <g>
      <polygon class="st2" points="625.5,224.2 593.3,261.9 636.6,246.1  "/>
    </g>
    <g>
      <path class="st3" d="M594.1,266.8l62.4,13.7l12.1-40.9L594.1,266.8z"/>
    </g>
  </svg>

</body>
</html>

我想让st1，st2和st3出现在页面中的随机位置，并创建一个动画，使它们回到原来的位置（xml标签中的那个）。

谢谢，

将svg元素从随机位置补间到它们的实际位置

0 个答案: