svg rotate shape around its centre endlessly

Question

I'm trying to rotate a svg shape around its centre endlessly.

This is what I have so far.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="841.89px" height="1190.55px" viewBox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55"
     xml:space="preserve">
<g>
    <polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1 
        384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732 
        223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064 
        266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795 
        463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16 
        584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936  " transform="rotate(15, 40, 40)" dur="0.1s" calcMode="discrete" repeatCount="indefinite"/>

    <circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39"/>
</g>
</svg>

…but can't get it to work.

Do I need to rotate it with javascript cause I think I've seen something similar using solely xml.

Also, the second shape should be in the centre of the first shape too.

Thanks for help!

Answer 1

Are you looking for something like this?
http://jsfiddle.net/t97w9cqm/7/
I'm just rotating it with CSS animations.

#Layer_1 {
    transform-origin: 50% 50%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

The key is the transform-origin

Answer 2

You are missing the animation, add the animation and you should be set.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="841.89px" height="1190.55px" viewBox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55"
     xml:space="preserve">
<g>
    <polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1 
        384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732 
        223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064 
        266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795 
        463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16 
        584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936" calcMode="discrete">
        <animateTransform 
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          from="0 398 639"
          to="360 398 639"
          dur="1s"
          repeatCount="indefinite"/>
    </polygon>

    <circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39"/>
</g>
</svg>

Tested successfully in Chrome Version 46.0.2490.80 m on Windows 7. I have the 'star' spinning with the black ring toward the center of the star.