Javascript 将svg元素从随机位置调整到实际位置_Javascript_Canvas_Svg_Tween

Javascript 将svg元素从随机位置调整到实际位置

javascript canvas svg

Javascript 将svg元素从随机位置调整到实际位置,javascript,canvas,svg,tween,Javascript,Canvas,Svg,Tween,我有一个svg图像文件，包含几个多边形和路径。我想在我的网页中以随机位置显示这些多边形，并创建一个动画，将它们连接到svg文件中的位置。总而言之，我想显示和分解svg，并对其进行动画处理以重建自身我已经找到了这样做的方法，但是我找不到一种方法从svg文件中获取位置作为目标而不是源你知道我怎么能这样做吗编辑：以下是我目前拥有的： <!DOCTYPE html> <html> <head> <title>Title</title&

我有一个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{fill:#F8971D；}
.st2{fill:#8DC63F；}
.st3{fill:#00A18E；}

我想让st1、st2和st3在页面中的任意位置出现，并创建一个动画，使它们返回到原始位置（xml标记中的位置）

谢谢，

向我们展示您迄今为止所做的尝试。我添加了一个代码示例