Seeking animated SVGs using CSS styling

Question

Seeking animated SVGs using CSS styling

I've been trying to animate my SVG icon, but I seem to be missing something. I'm still fairly new to CSS animations.

The issue I'm facing is that the position of the SVG isn't correct when the website loads. Additionally, during the animation (on hover), it seems like the dimensions of the SVG "div" are changing and getting rescaled.

Is there a way to keep the SVG in its original "cross" shape while allowing it to rotate on its own axis without losing its main dimensions?

#logo{
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center;
    animation-play-state: paused;
}
    
svg:hover #logo{
    animation-play-state: running;
}

@keyframes spin{
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

<div class="logo">
  <svg  width="35px" height="35px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
     <g>
        <rect id="logo" x="16.57" y="-4.86" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.2843 20)" width="6.86" height="49.71"/>
     </g>
     <g>
        <rect id="logo" x="-4.86" y="16.57" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.2843 20)" width="49.71" height="6.86"/>
     </g>
   </svg>  
</div>

html css animation svg

Answer 1

Answer №1

If you take a look at this demonstration, you'll see that I simplified the process by removing the transform and focusing solely on width/height and x/y calculations.

The key is to establish a view box with dimensions that suit your needs. In this case, I kept it at 80x80, slightly larger than the rectangle's width. Feel free to experiment with these values. The crucial part comes in figuring out the x and y coordinates:

x = viewboxX/2 - width/2

y = viewBoxX/2 - width/2

Once you've determined that, for the second square, swapping width for height and x for y will create the cross shape you're aiming for.

#logo{
            animation-name: spin;
            animation-duration: 4000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: center;
            animation-play-state: paused;
            }

            svg:hover #logo{
            animation-play-state: running;}

            @keyframes spin{
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }}

  <div class="logo">
            <svg width="100px" height="100px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="40px" y="40px" viewBox="0 0 80 80" style="enable-background:new 0 0  40 40;" xml:space="preserve">
             <g id="logo">
                <rect x="15.14" y="36.57" width="49.71" height="6.86"/>
                <rect x="36.57" y="15.14" width="6.86" height="49.71"/>
             </g>          
            </svg> 
         </div>

Answer 2

If you take a look at this demonstration, you'll see that I simplified the process by removing the transform and focusing solely on width/height and x/y calculations.

The key is to establish a view box with dimensions that suit your needs. In this case, I kept it at 80x80, slightly larger than the rectangle's width. Feel free to experiment with these values. The crucial part comes in figuring out the x and y coordinates:

x = viewboxX/2 - width/2

y = viewBoxX/2 - width/2

Once you've determined that, for the second square, swapping width for height and x for y will create the cross shape you're aiming for.

#logo{
            animation-name: spin;
            animation-duration: 4000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: center;
            animation-play-state: paused;
            }

            svg:hover #logo{
            animation-play-state: running;}

            @keyframes spin{
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }}

  <div class="logo">
            <svg width="100px" height="100px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="40px" y="40px" viewBox="0 0 80 80" style="enable-background:new 0 0  40 40;" xml:space="preserve">
             <g id="logo">
                <rect x="15.14" y="36.57" width="49.71" height="6.86"/>
                <rect x="36.57" y="15.14" width="6.86" height="49.71"/>
             </g>          
            </svg> 
         </div>

Answer 3

Answer №2

Make sure to select Mark Edward's answer as the correct one

It is possible to remove all outdated attributes from SVG files.

To streamline the code, consider replacing the rect element with a single path and utilize viewBox along with the d= path attribute to adjust sizes (keep in mind that percentage values cannot be used in paths).

I have made some modifications to clarify that the animation applies only to a specific element within the SVG, not the entire SVG itself.

svg {
  background: lightgreen;
  width: 200px;
}

svg path {
  animation: spin 4s linear infinite paused;
  transform-origin: center;
}

svg:hover path {
  animation-play-state: running;
}

@keyframes spin {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
  <rect x="25%" width="50%" y="25%" height="50%" fill="green"/>
  <path d="M4 1v6m3-3h-6" stroke="red"/>
 </svg>

Answer 4

Make sure to select Mark Edward's answer as the correct one

It is possible to remove all outdated attributes from SVG files.

To streamline the code, consider replacing the rect element with a single path and utilize viewBox along with the d= path attribute to adjust sizes (keep in mind that percentage values cannot be used in paths).

I have made some modifications to clarify that the animation applies only to a specific element within the SVG, not the entire SVG itself.

svg {
  background: lightgreen;
  width: 200px;
}

svg path {
  animation: spin 4s linear infinite paused;
  transform-origin: center;
}

svg:hover path {
  animation-play-state: running;
}

@keyframes spin {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
  <rect x="25%" width="50%" y="25%" height="50%" fill="green"/>
  <path d="M4 1v6m3-3h-6" stroke="red"/>
 </svg>

Seeking animated SVGs using CSS styling

Answer №1

Answer №2

Similar questions

Swap out symbols for pictures

Chrome and Firefox browsers are not supporting HTML simple anchor links

Adaptable Text Title

Having difficulty implementing a hover event on a sibling element of a target using either the duration parameter in jQuery UI or CSS

Utilizing media queries to tailor the pre-designed website and ensure adaptability

Ways to implement material-ui button design on an HTML-native button

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

Web Development: Custom Search Form

Creating a lifelike sinusoidal flag animation or flutter effect using SVG格式

Assistance needed with CSS floating properties

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

The attempt to remove the ajax-loaded page while preserving the original div is proving to be

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Is it necessary for background images to be loaded on mobile devices within media queries in CSS3?

Saving data in HTML using PHP and then downloading it

What steps can I take to direct mobile visitors to the mobile-friendly version of my website?

How can you enable fullscreen for a featherlight iFrame?

Is the Wordpress search bar a clickable link?

What is the method for fetching a WebElement with a specific CSS attribute using JavascriptExecutor?

Symbol for infinity does not appear correctly within the span element