Javascript 用于动画目的的正确内联SVG标记结构？

让我们假设我想用Javascript设置向量的动画，看起来像这样

然后我把它分成4个部分（头，身体，两条腿），并为每个部分做一些动画

我的问题是，上面向量的正确标记结构是什么

据我所知。。有3种可能性：

团体

...
...
...
...

嵌套SVG

...
...
...
...

每个部分的SVG

我知道有很多库可以帮助我们制作SVG动画， 但这不是我要问的，我想知道的是标记结构应该是什么样子的？ 所以我们可以更容易地操纵它们

---

有谁能给我一点启示吗？

这些结构中，你会使用哪一个并不是真正由你想要给它们设置动画的事实决定的。您需要问的问题是，为每个零件以及相互之间的关系制定定位、大小调整和转换属性的最具表现力的方式是什么

• 如果在父svg中使用组，则坐标最初表示为相对于父
  元素的视口
  • 使用
    元素上的SVG属性或CSS属性，可以在父元素内移动部件。（我所说的“移动”是指任何afine变换，包括旋转、缩放、翻转和倾斜）
  • 然后，零件所表示的坐标将被解释为父对象中的某种“中性”位置
• 如果嵌套SVG，则为每个零件建立新视口
  • 对于每个零件，您定义一个矩形，在该矩形内，将使用属性

    x

    、

    y

    、

    宽度

    和

    高度

    进行渲染

    preserveAspectRatio

    解析

    viewBox

    在中的位置。SVG或CSS

    transform

    可用于移动这些矩形
  • 可以使用

    viewBox

    属性选择表示子内容的坐标系。然后坐标独立于任何父对象。不使用视图框，结果相当于使用相应的

    x

    和

    y

    属性值在
    元素上设置

    translate

    转换
• 如果使用单独的SVG，它们将按照CSS规则定位在父HTML中
  • 请记住，定位属性以百分比表示。如果您忽略了

    视图框

    或
    元素上的宽度/高度属性，则会有一个协商过程来确定其大小，并且根据HTML CSS规则，父元素的大小可能会更改
  • 子内容的坐标系由相应的

    viewBox

    属性定义

在您的案例中，一个更具体的问题是您是否要使用动画或动画。虽然SMIL不是由Microsoft浏览器实现的，但它在计时和在同一属性/属性上堆叠多个动画方面具有更丰富的语法。它还具有对事件作出反应的能力，并且可以设置XML属性的动画。（不是所有的，而是这里提到的所有positioining属性。）CSS能够为每个变换定义一个

变换原点

，在SVG中，该原点仅用于

旋转

变换

---

因此，如果您想在父级中为零件的定位设置动画，选择CSS动画可能会确定结构，从而避免使用XML属性进行定位。

理论上，任何这些都可以工作。我知道在保持SVG元素上的位置方面存在挑战。特别是对于

变换原点

，它们在每个浏览器中的行为不同。但现在可用的SVG库（例如GSAP、SVG.js、snap.SVG）已经解决了这一问题，我不太确定您在第2点上所说的坐标系，因为它们与父坐标系共享相同的坐标系。CMIIW嵌套svg元素中的内容在设置

viewBox

后立即以其自身的坐标系表示，请参阅。对于现有的SVG处理库，我不知道有任何明确区分SVG和CSS转换的方法。他们似乎都在使用SVG并计算其余的内容。对不起，我来不及编辑前面的评论了。第一句话必须是：嵌套svg元素中的内容以其自己的坐标系表示，坐标系由x和y转换，并在设置

viewBox

后进行额外转换，请参见。