CSS Przejścia i transformacje elementów SVG

Question

Obecnie próbuję obrócić grupę SVG za pomocą transformacji CSS i animować ją za pomocą przejść CSS. Dostaję pożądaną transformację, ale nie animuję, żadnego pomysłu na to, co może być problemem?

Inline SVG Kod

<a href="javascript:void(0)" class="hub-icon-container"> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve"> 
     <g class="hub-icon"> 
      <path fill="#9B59B6" d="M64.142 23.032L35.001 34.998l14.533 6.271 18.908-7.766c0.689-0.285 1.026-1.087 0.744-1.782l-3.265-7.946C65.635 23.079 64.835 22.747 64.142 23.032z"/> 
      <path fill="#F74ED7" d="M64.068 47.142L35.001 34.998l5.845 14.712 18.861 7.876c0.688 0.29 1.495-0.04 1.783-0.73l3.312-7.931C65.09 48.233 64.763 47.431 64.068 47.142z"/> 
      <path fill="#F2C40D" d="M46.97 64.138l-11.97-29.14 -6.268 14.534L36.5 68.44c0.284 0.689 1.084 1.026 1.779 0.743l7.946-3.265C46.919 65.634 47.256 64.833 46.97 64.138z"/> 
      <path fill="#E67E22" d="M22.863 64.069l12.138-29.071 -14.707 5.846 -7.877 18.859c-0.292 0.692 0.039 1.497 0.731 1.784l7.93 3.311C21.771 65.089 22.573 64.76 22.863 64.069z"/> 
      <path fill="#E74C3C" d="M5.865 46.966l29.136-11.968 -14.531-6.267L1.562 36.498c-0.693 0.285-1.028 1.089-0.741 1.78l3.263 7.947C4.369 46.919 5.168 47.254 5.865 46.966z"/> 
      <path fill="#19BC9C" d="M5.935 22.858l29.065 12.14 -5.839-14.707 -18.863-7.876c-0.693-0.29-1.495 0.039-1.785 0.73l-3.311 7.931C4.914 21.768 5.241 22.57 5.935 22.858z"/> 
      <path fill="#2ECC71" d="M23.032 5.862l11.969 29.136 6.269-14.528L33.506 1.563c-0.286-0.697-1.089-1.03-1.783-0.746l-7.944 3.268C23.084 4.366 22.75 5.168 23.032 5.862z"/> 
      <path fill="#3398DB" d="M47.142 5.934L35.001 34.998l14.707-5.841L57.589 10.3c0.286-0.697-0.044-1.499-0.735-1.789l-7.929-3.308C48.232 4.911 47.432 5.245 47.142 5.934z"/> 
     </g> 
    </svg> 
</a> 

Kompas SCSS

.hub-icon-container { 
    @include transition(all 0.5s ease-in-out); 
    &:hover { 
    .hub-icon { 
     transform:rotate(180deg); 
     transform-origin:50% 50%; 
     -ms-transform:rotate(180deg); 
     -ms-transform-origin:50% 50%; 
     -webkit-transform:rotate(180deg); 
     -webkit-transform-origin:50% 50%; 
    } 
    } 
} 

Zestawione CSS

.hub-icon-container { 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 
.hub-icon-container:hover .hub-icon { 
    transform:rotate(180deg); 
    transform-origin:50% 50%; 
    -ms-transform:rotate(180deg); 
    -ms-transform-origin:50% 50%; 
    -webkit-transform:rotate(180deg); 
    -webkit-transform-origin:50% 50%; 
} 

CodePen link poniżej

http://codepen.io/alexbaulch/pen/bDkhv

Answer 1

Naprawiono!

Przejście było w niewłaściwym miejscu, założyłem, że przejście schodzi do elementów dzieci, ale najwyraźniej nie. Naprawiono także obrót, animując od 0 do 180 stopni.

Inline SVG

<a href="javascript:void(0)" class="hub-icon-container"> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve"> 
     <g class="hub-icon"> 
      <path fill="#9B59B6" d="M64.142 23.032L35.001 34.998l14.533 6.271 18.908-7.766c0.689-0.285 1.026-1.087 0.744-1.782l-3.265-7.946C65.635 23.079 64.835 22.747 64.142 23.032z"/> 
      <path fill="#F74ED7" d="M64.068 47.142L35.001 34.998l5.845 14.712 18.861 7.876c0.688 0.29 1.495-0.04 1.783-0.73l3.312-7.931C65.09 48.233 64.763 47.431 64.068 47.142z"/> 
      <path fill="#F2C40D" d="M46.97 64.138l-11.97-29.14 -6.268 14.534L36.5 68.44c0.284 0.689 1.084 1.026 1.779 0.743l7.946-3.265C46.919 65.634 47.256 64.833 46.97 64.138z"/> 
      <path fill="#E67E22" d="M22.863 64.069l12.138-29.071 -14.707 5.846 -7.877 18.859c-0.292 0.692 0.039 1.497 0.731 1.784l7.93 3.311C21.771 65.089 22.573 64.76 22.863 64.069z"/> 
      <path fill="#E74C3C" d="M5.865 46.966l29.136-11.968 -14.531-6.267L1.562 36.498c-0.693 0.285-1.028 1.089-0.741 1.78l3.263 7.947C4.369 46.919 5.168 47.254 5.865 46.966z"/> 
      <path fill="#19BC9C" d="M5.935 22.858l29.065 12.14 -5.839-14.707 -18.863-7.876c-0.693-0.29-1.495 0.039-1.785 0.73l-3.311 7.931C4.914 21.768 5.241 22.57 5.935 22.858z"/> 
      <path fill="#2ECC71" d="M23.032 5.862l11.969 29.136 6.269-14.528L33.506 1.563c-0.286-0.697-1.089-1.03-1.783-0.746l-7.944 3.268C23.084 4.366 22.75 5.168 23.032 5.862z"/> 
      <path fill="#3398DB" d="M47.142 5.934L35.001 34.998l14.707-5.841L57.589 10.3c0.286-0.697-0.044-1.499-0.735-1.789l-7.929-3.308C48.232 4.911 47.432 5.245 47.142 5.934z"/> 
     </g> 
    </svg> 
</a> 

Kompas SCSS

.hub-icon-container { 
    &:hover { 
     .hub-icon { 
      transform:rotate(180deg); 
      -ms-transform:rotate(180deg); 
      -webkit-transform:rotate(180deg); 
     } 
    } 
    .hub-icon { 
     @include transition(all 0.5s ease-in-out); 
     transform:rotate(0deg); 
     transform-origin:50% 50%; 
     -ms-transform:rotate(0deg); 
     -ms-transform-origin:50% 50%; 
     -webkit-transform:rotate(0deg); 
     -webkit-transform-origin:50% 50%; 
    } 
} 

Zestawione CSS

.hub-icon-container:hover .hub-icon { 
    transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
} 
.hub-icon-container .hub-icon { 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    transform: rotate(0deg); 
    transform-origin: 50% 50%; 
    -ms-transform: rotate(0deg); 
    -ms-transform-origin: 50% 50%; 
    -webkit-transform: rotate(0deg); 
    -webkit-transform-origin: 50% 50%; 
} 

CodePen Updated poniżej

http://codepen.io/alexbaulch/pen/bDkhv