Ladies and Gentlemen, there is such a primitive example:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> svg{ background: orange; } </style> <polygon points="50 50, 0 100, 100 100" fill="gray"> <!-- --> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="1 1 100" to="100 100 100" dur="5s" repeatCount="indefinite"/> </polygon> </svg>

I want to make the triangle spinning around the middle of the SVG block.

I do not ask for a trivial decision for me, please explain how the coordinate system from="1 1 100 " to="100 100 100" works. If I correctly understood this is an analogue of @keyframes - CSS and if I am right, then such a construction with average values from="1 1 100 " 50%="50 50 50" to="100 100 100" will be correct

And in general, am I the right direction in the implementation of this task?

    1 answer 1

    From zero to 360 degrees around the point (50, 50):

     <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> svg{ background: orange; } </style> <polygon points="50 50, 0 100, 100 100" fill="gray"> <!-- --> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="5s" repeatCount="indefinite"/> </polygon> </svg>

    • Thank, Igor ... Hour was tormented))))) - Air