0

假设我想用 Javascript 为看起来像这样的矢量设置动画。

单击此处..（对不起，我的声誉点低于图片发布的要求）

然后我将它分成 4 个部分（头部、身体、2 条腿）并为每个部分做一些动画。

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

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

  1. 团体

    <svg> <g id='head'>...</g> <g id='body'>...</g> <g id='leg_1'>...</g> <g id='leg_2'>...</g> </svg>

  2. 嵌套 SVG

    <svg> <svg id='head'>...</svg> <svg id='body'>...</svg> <svg id='leg_1'>...</svg> <svg id='leg_2'>...</svg> </svg>

  3. 每个部分的 SVG

    <svg id='head'></svg> <svg id='body'></svg> <svg id='leg_1'></svg> <svg id='leg_2'></svg>

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

有没有人可以给我一个关于这个的启发？

4

1 回答 1

0

您将使用这些结构中的哪一个并不真正取决于您要为它们设置动画的事实。您需要问的问题是，为每个部分以及彼此之间的关系制定定位、尺寸和转换属性的最具表现力的方式是什么？

  • 如果您在父 svg 中使用组，则坐标最初表示相对于父<svg>元素的视口。

    • 使用元素上的 SVGtransform属性或 CSStransform属性<g>，您可以在父级内部移动部件。（“移动”是指任何精细的变换，包括旋转、缩放、翻转和倾斜）
    • 然后，零件所表达的坐标将被解释为父级中的某种“中性”位置。

  • 如果嵌套 svgs，则为每个部分建立新的视口。

    • 对于每个部分，您定义一个矩形，在该矩形内要使用属性x、y和width进行渲染height。preserveAspectRatio解决了inside的定位viewBox。SVG 或 CSStransform可用于移动这些矩形。
    • 可以通过viewBox属性选择表达子内容的坐标系。然后坐标独立于任何父级。将 viewBox 排除在外，结果等效于使用相应的和属性值translate对元素设置转换。<g>xy

  • 如果您使用单独的 svgs，它们每个都按照 CSS 规则定位在父 HTML 中。

    • 请记住，以百分比表示的定位属性在 HTML 和 SVG 中具有不同的含义。如果您忽略元素viewBox的宽度/高度属性<svg>，则需要通过协商过程来确定其大小，并且根据 HTML CSS 规则，父元素的大小可能会发生变化。
    • 子内容的坐标系由各自的viewBox属性定义。

在您的情况下，一个更具体的问题是您是否要使用CSS或SMIL动画。虽然 SMIL 不是由 Microsoft 浏览器实现的，但它具有更丰富的语法，可用于计时和在同一属性/属性上堆叠多个动画。它还具有对事件作出反应的能力，并且您可以为 XML 属性设置动画。（不是全部，而是这里提到的所有定位属性。）CSS 能够transform-origin为每个转换定义一个，在 SVG 中仅针对rotate转换实现。

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

于 2018-05-10T15:59:56.763 回答