Simulate a rotation by converting to SVG

Question

I have a rectangle in SVG that I need to rotate on a bar from a specific point. The best way I can do this is to convert to the xy axis of rotation, rotate the degree and then convert again. The problem is that xy is the second conversion. I assume that to some extent he will accept scythe and sin, just not sure where and why.

* | | | 

will rotate by -90degrees to

 *--- 

Maybe I'm looking at it wrong, can anyone cleanse it?

Answer 1

If you use the SVG transform attribute instead of trying to encode it yourself using javascript, all you have to do is center your shape using (0, 0) as the rotation axis.

For example, in the example below, the center of the initial arc in the path is at the origin. Animation is applied to this element, so it seems to rotate in place, while the circle is motionless. Translation to the containing group moves the center point of 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 is 1.732 to get the center of the circle, the transformation matrix processes the angles. Please note: you do not need to use SMIL with SVG , changing the angle from the javascript timeout also works fine.

Answer 2

I think you only need to cancel the reconciliation for the first conversion:

pseudo code:

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

Answer 3

The SVG Spec section on coordinate system transformations perfectly shows transformation matrices and how their chains are.

Answer 4

I found my way here, wondering how to rotate and render using JS.

I liked @gz. answer. This is exactly what I was looking for.

I only did the addition ,256,256 , to indicate the anchor 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 "Show this radar screen."

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