Applying CSS transitions and transforms to SVG elements

Having trouble animating an SVG group with CSS transitions after applying a CSS transform? Check out my code below and let me know if you spot the issue.

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

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

htmlcsssvg

Answer №1

Resolved the issue!

I discovered that the transition was incorrectly placed, as I mistakenly assumed it would affect the children elements as well. I have also corrected the rotation by smoothly animating between 0 and 180 degrees.

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

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

Find the updated CodePen link below

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to shift a list to the right within my navigation bar using ReactJS and CSS?

I'm looking to align a list to the right in my navbar, as shown in the image below Image Here's my navbar.js code: import React from "react"; import "./Navbar.css"; const Navbar = ({ isScrolling, information }) => { ...

javascripthtmlcssreactjs

Is your animation glitching due to axis restrictions?

I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer ...

jqueryhtmlcssjquery-animate

Adjustable dimensions for a collection of squares based on screen size

I am currently designing a grid composed of 1:1 squares and allowing the user to continually add more squares. My main goal is to ensure that the size of each square maintains its aspect ratio while being able to resize accordingly. The challenge lies in k ...

javascripthtmlcss

Error: The locator I used with the ID getUserById did not find any elements

Here is the code snippet from my HTML file: <h1>User list</h1> <button class="btn btn-primary" [routerLink]="'/register'">Register</button> <br> <br> <table class="table& ...

javascripthtmlangularprotractor

Steps for creating an expandable menu in the Magento category list

Looking for a way to create a category menu that expands when clicked on? Check out this example of a left menu (not Magento) at Can this be achieved with CSS alone? Or is there a specific module that can help with this functionality? ...

cssmagentowebshop

Maintain the expanded sub-menu when the mouse leaves the area, but a sub-option has been

Implementing a side menu with parent and child options that dynamically display content in the main div on the right when a child option is selected. The parent options are initially shown upon page load, and the child options appear when the mouse hovers ...

javascriptjquerycssjsp

Center text vertically even when its number of lines is unknown

Can anyone help me figure out how to vertically center text that can be one or two lines long? The text also has a specific line-height set. I attempted the solution provided in this link but it didn't produce the desired result: <div> < ...

htmlcss

Getting rid of the Horizontal Scroll Bar

Having trouble with a persistent horizontal scrollbar in the "section3__container" container despite attempts to adjust size and overflow settings. Need assistance in removing this unwanted feature. <html lang="en"> <head> <m ...

javascripthtmlcsssassoverflow

Google Chrome - Automatically scroll to the bottom of the list when new elements are added in *ngFor loop

I have a basic webpage showcasing a list of videos. Towards the bottom of the page, there is a button labeled "Load more". When a user clicks on this button, an HTTP request is triggered to add more data to the existing array of videos. Here is a simplifi ...

cssangulartwitter-bootstrapgoogle-chromebootstrap-4

Despite utilizing overflow and wrap properties, HTML lists still fail to display horizontally

Make sure to copy the code and run the HTML file first. For organization, place the JavaScript file in the scripts folder and the CSS file in the styles folder. The issue at hand is that the li elements are not displaying horizontally as intended; they n ...

javascriptjqueryhtmlcss

Having difficulty with CSS animation and background issues

I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...

cssanimation

What is the best way to share an HTML element across multiple pages in Next.js?

I am in the process of developing a website that features a table of contents with links on the left side, content sections in the middle, and an overview on the right. For a visual representation of the general concept, please visit: https://i.sstatic.net ...

javascriptcssreactjsnext.js

Mobile display trapping Bootstrap navbar

Can anyone help me figure out why my navbar is stuck in its mobile display? Here is the link to the code: http://jsfiddle.net/enL35t1q/ Navbar <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul cla ...

htmltwitter-bootstrapbootstrap-4navbarnav

Tips for placing text on top of an image within a <p> element

I am grappling with a situation where I have a div containing text within <p> tags, and also an accompanying PNG image. My goal is to position the image to the left of the div so that it overlaps with the text. Despite my attempts at utilizing z-inde ...

htmlcssz-indexoverlap

Modify MUI's ListItemText component by targeting a specific span to implement customized styles using the useStyle hook

It's quite perplexing that although this is a straightforward task in regular CSS, it must be accomplished through MUI's useStyles for some peculiar reason. Essentially, I possess a ListItem containing a ListItemText. It appears as follows: cons ...

javascriptcssreactjsmaterial-ui

Guide on disabling a hyperlink in a table column under specific conditions using Angular2

I am working with a table that has 4 columns: Name, id, Dept, City. The row data and column data are provided as an array from a typescript file and I am iterating through *ngFor to display the content. Below is a snippet of my code: <tbody> < ...

htmlangularhyperlink

fixed width div with width proportion

experts. I'm currently experimenting with a spinning cube effect for my gallery and I recently came across Paul Hayes' experimental cube on his website (it's best viewed in Google Chrome). However, I am facing a challenge in getting it to w ...

csshtml3d

A div element with a set width that contains an inline child element

I recently created a basic HTML document with two elements: a div with a fixed width, and an image placed after it. According to my understanding, images are inline elements, so I expected the image to appear next to the div on the right side since there ...

htmlcss

Only in Firefox, there seems to be an issue with how the CSS

Using JavaScript, I have added two buttons to the left of the filter box: https://i.sstatic.net/yp8mg.png This is the HTML code for the buttons: https://i.sstatic.net/DgT27.png Here is the CSS style for the buttonfile: .buttonfile { text-indent: 0; ...

cssgoogle-chromefirefoxrendering

Filtering data in an antd table by searching

Just starting out with React hooks, specifically using TypeScript, and I'm struggling to implement a search filter with two parameters. Currently, the search filter is only working with one parameter which is 'receiver?.name?'. However, I wo ...

javascripthtmlreactjstypescripthtml-table