0

I want to animate an image for The Center for Humane Technology for use on a html landing page. The image looks like this and contains 28 gears positioned in a heart shape. I would like to have each gear to rotate continuously around its center, either clockwise or counter-clockwise.

I have read the other SO posts that deal with similar issues, but the solutions do not work for me. When I add e.g. an animateTransform to the shape of a gear, specifying its center coordinates, then it rotates in a wide circle around its center, not staying into position. I am confused.

I have the orginal artwork (created by nivedita) from EPS to SVG, which resulted in rather large paths. This is the resulting SVG image.

First I was planning to use AnimateJS for the animation, but inline SVG animation markup may also do the trick (maybe better).

Reading other SO submissions, I tried rotating gear1 by calculating its center from these coordinates:

  • X: 42.623
  • Y: 309.810
  • Width: 60.796
  • Height: 60.774

Resulting in following transform:

  <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>

Its not working. Is this because of the transform on the parent canvas group?

Two questions:

  1. What am I doing wrong?
  2. Is there an easier way to animate this, so I don't have to calculate center for all gears (I know I could use javascript for coordinates calc)?
Arnold Schrijver
  • 3,588
  • 3
  • 36
  • 65
  • 1
    This article may be of interest - describes a method of calculating a centre of rotation for path elements: http://www.petercollingridge.co.uk/blog/svg-animation-rotating-elements. – Conan Apr 22 '18 at 11:21
  • Thank you @Conan. It's a good article, but its basically what I am doing now. I think the transform on the `canvas` is the problem, because it inverts the Y-access and scales. If I subtract half the height to the coordinates instead of adding, then the radius is much smaller. Maybe now need to take the scale into account also. – Arnold Schrijver Apr 22 '18 at 11:24
  • I looked a bit at how `matrix` works, but my matrix math is too stale to be able to fix it now. Never thought a simple rotate around center could be this much effort. – Arnold Schrijver Apr 22 '18 at 11:36
  • @Conan I stand corrected. Using `getBBox()` _does_ work! No need to calculate 28 coords, just some JS. Thx again! – Arnold Schrijver Apr 22 '18 at 13:25
  • 1
    It might be better to simply bake the transformation into the path data with a vector app, this would be done by ungrouping the canvas. Did it in a couple of seconds and this is the result: https://jsfiddle.net/Lt6z11eL/ – methodofaction Apr 22 '18 at 13:27
  • Thank you, @Duopixel! I'll do that. – Arnold Schrijver Apr 22 '18 at 14:13

0 Answers0