CSS Transitions and transforms on SVG elements

I am currently trying to rotate an SVG group using a CSS transform and animate it using CSS transitions. I am getting the desired transform but not the animate, any idea on what the issue might be?

Inline SVG Code

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

Compass 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%;
    }
  }
}

Compiled 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 below

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

Can CSS be applied to SVGs?

Not only does it mean that SVG properties can be styled using CSS as presentation attributes or in style sheets, but this also can be applied to CSS pseudo-classes such as :hover or :active .

How do you animate elements in SVG?

SVG <animate> Element It can be used to make graphics and animations like in HTML canvas. The <animate> SVG element is used to animate an attribute or property of an element over time. It's normally inserted inside the element which we want to animate.

Can SVGs have pseudo elements?

SVG content can be added using these pseudo-elements by following the methods described below: Method 1: Using the background-image property: The background-image property is used to set one or more background images to an element.

What is transform in SVG?

The transform attribute defines a list of transform definitions that are applied to an element and the element's children. Note: As of SVG2, transform is a presentation attribute, meaning it can be used as a CSS property.

Fixed it!

The transition was in the wrong place, I had assumed that the transition would descend down to the children elements but apparently not. Also fixed the rotation by animating between 0 and 180 degrees.

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>

Compass 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%;
    }
}

Compiled 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 below

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

CSS Transitions and transforms on SVG elements

Tags:

html

css

svg

Alex Baulch

People also ask

1 Answers

Alex Baulch

Recent Activity

Donate For Us

CSS Transitions and transforms on SVG elements

Tags:

html

css

svg

Alex Baulch

People also ask

1 Answers

Alex Baulch

Related questions

Recent Activity

Donate For Us