Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

CSS Transitions and transforms on SVG elements

Tags:

html

css

svg

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

like image 335
Alex Baulch Avatar asked Sep 02 '13 11:09

Alex Baulch

People also ask

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.

1 Answers

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

like image 164
Alex Baulch Avatar answered Oct 12 '22 05:10

Alex Baulch
Sign in to Comment

Related questions

Disable all scrolling on webpage
Is it possible to pull data from HTML5's local storage and save to server database?
How to keep footer at bottom of page? [closed]
Can WeasyPrint fit to Paper Size Automatically
Pass Parameters in VBA HTTP Post Request
html rotate entire canvas by 90 degrees
using XPath: how to exclude text in nested elements
Amplify audio with Web Audio API
How to simplify my CSS stylesheet?
CSS selector for first instance of child with class? [duplicate]
How do you load a partial html in html5? [closed]
Single page web application concerns
Downloading a dynamically generated SVG file from the browser
Display image with wildcard in src
Offline/Online Database Authentication/Synchronization from jQuery Mobile
Working with images in HTML5 offline application?
javascript pass function to onclick event
Problems positioning text DIV over image DIV with CSS [duplicate]
Get DOM hierarchy level of element (count descendant levels)
What is happening between receiving HTML and DOM ready?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!