Simulate Pivot Rotate Using Transform In SVG

Question

I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent, just not sure where or why.

*
|
|
|

would rotate -90degrees to

*---

Maybe im looking at this the wrong way, can anyone clearify?

Answer 1

If you use the SVG transform attribute rather than trying to code it yourself with javascript, all you need to do is center your shape with (0, 0) as the pivot.

For instance, in the example below, the center of the initial arc in the path is at the origin. The animation applies to that element, so it appears to spin in place, with the circle stationary. The translation on the containing group moves the center point of the rotation to the center of the image.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <g transform="translate(32, 32)" stroke="navy" fill="none">
        <path d="M -1 1.732 a 2 2 0 1 1 2 0 v 24 a 1 1 0 0 1 -2 0 Z">
            <animateTransform attributeName="transform" type="rotate"
                from="0" to="360" dur="1s" repeatDur="indefinite"/>
        </path>
    </g>
</svg>

The only calculation there is the 1.732 to get the center of the circle, the transformation matrix handles the angles. Note, you don't have to use SMIL with SVG, changing the angle from a javascript timeout works fine too.

Answer 2

I found my way here wonder how to rotate and image with JS.

I liked @gz. answer. It was exactly what I was looking for.

What I did was only add the ,256,256 to specify the pivot point.

From:

from="0"
to="360" 
dur="1s"

To:

from="0,256,256"
to="360,256,256" 
dur="10s"

---

<animateTransform attributeName="transform"
  type="rotate"
  from="0,256,256"
  to="360,256,256" 
  dur="10s"
  repeatDur="indefinite"
/>

---

---

Snippet, Click Run, and See This Radar Screen Rotate.

.radar{width:200px;height:200px;}

<svg class="radar"
viewBox="0 0 512 512" 
xmlns="http://www.w3.org/2000/svg">

<path opacity="1" 
  fill="#000" 
  d="M0 0h512v512H0z">
</path>

<path 
transform="scale(1, 1)
translate(0,0)" 
fill="#f00" 
d="M252.78 20.875c-1.302.012-2.6.03-3.905.063-37.928.974-76.148 11.153-111.28 31.437C25.164 117.285-13.41 261.322 51.5 373.75s208.946 151.036 321.375 86.125c77.7-44.86 120.1-127.513 117.47-211.406-3.563 65.847-35.898 128.573-91 169.374-10.828 9.62-22.774 18.315-35.814 25.844-103.68 59.86-235.983 24.4-295.842-79.282-59.86-103.68-24.43-235.984 79.25-295.844 35.64-20.576 74.67-29.88 112.968-29.03 63.304 1.4 124.623 30.57 165.438 82.53l-32.594 23.032c-33.27-42.835-84.01-66.6-136.063-67-.96-.008-1.91-.012-2.875 0-.964.01-1.943.038-2.906.062-28.006.717-56.222 8.215-82.156 23.188-82.99 47.914-111.508 154.322-63.594 237.312 47.914 82.99 154.32 111.51 237.313 63.594 51.37-29.66 81.862-81.724 86.28-136.78-12.53 45.37-42.32 86.745-85.438 114.186-.02.013-.043.018-.062.03l-.344.22c-3.16 2.147-6.42 4.216-9.78 6.156-74.245 42.865-168.918 17.494-211.782-56.75-42.864-74.243-17.493-168.917 56.75-211.78 23.2-13.396 48.39-20.122 73.375-20.782 47.953-1.266 95.138 19.858 125.968 59.156l-39.844 28.156c-20.232-24.32-50.055-37.79-80.594-38.03-1.17-.01-2.33 0-3.5.03-17.035.432-34.176 4.995-49.938 14.094-50.435 29.12-67.806 93.877-38.687 144.313 29.12 50.434 93.908 67.806 144.344 38.686 21.245-12.267 36.623-30.85 45.124-52.03-18.815 21.064-44.364 36.888-73.938 44.155-.04.013-.084.02-.125.033-37.507 10.787-78.796-4.816-99.217-40.188-24.07-41.688-9.845-94.712 31.843-118.78 13.028-7.523 27.143-11.314 41.156-11.69 25.66-.685 50.898 10.098 68.188 30.25l-41 28.97c-5.497-4.796-12.664-7.72-20.53-7.72-17.277 0-31.283 14.007-31.283 31.282 0 17.276 14.004 31.282 31.282 31.282 17.277 0 31.28-14.007 31.28-31.283 0-1.187-.06-2.347-.188-3.5l120.094-57.312 4.03-1.75-.06-.156 62.25-29.72 9.25-4.438-5.282-8.812-19.97-33.375-5.155-8.625-8.25 5.813-8.095 5.718c-45.9-58.864-116.14-91.053-187.844-90.405z">
 
<animateTransform
 attributeName="transform"
 type="rotate"
 from="0,256,256" 
 to="360,256,256" 
 dur="10s" 
 repeatDur="indefinite"
/>
</path>
</svg>

Answer 3

The SVG Spec section on coordinate system transformations nicely shows the transformation matrices and how to chain them.

Answer 4

i think, you only need to negate coordinated for the first transform:

pseudocode:

g.transform(0,2);
g.rotate(90);
g.transform(0,-2);