Question

我想为The Center for Humane Technology设置动画图像，以便在html着陆页上使用。图像看起来like this并包含28个心形的齿轮。我想让每个齿轮围绕其中心连续旋转，顺时针或逆时针旋转。

我已阅读其他涉及类似问题的SO帖子，但解决方案对我不起作用。当我添加例如一个齿轮形状的animateTransform，指定它的中心坐标，然后围绕它的中心旋转一圈，而不是停留在位置。我很困惑。

我有从EPS到SVG的原始图片（由nivedita创建），这导致了相当大的路径。这是结果SVG image。

首先我计划使用AnimateJS作为动画，但内联SVG动画标记也可以做到（或许更好）。

阅读其他SO提交，我尝试通过从这些坐标计算其中心来旋转gear1：

X：42.623
Y：309.810
宽度：60.796
身高：60.774

导致以下转换：

  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" id="gears-of-the-heart" width="333.92" height="526.28">

    <g id="canvas" transform="matrix(1.25 0 0 -1.25 0 526.27)">
      <g id="heart">
        <path d="M58.42 265.7a6.41 6.41  ..." id="gear1" fill="#1e2227">

          <animateTransform attributeType="xml" attributeName="transform" type="rotate"
          from="0 73.111 340.197" to="360 73.111 340.197" additive="sum" dur="3s" repeatDur="indefinite"/>

        </path>

        <!-- The other 27 gears here -->
      </g>

      <!-- More SVG elements (unrelated) -->
    </g>
  </svg>

它不起作用。这是因为父canvas组的转换？

两个问题：

我做错了什么？
有没有更简单的方法来设置动画，所以我不必为所有齿轮计算中心（我知道我可以使用javascript来获得坐标calc）？

SVG动画路径围绕其中心旋转

0 个答案: