The circular animation feature is malfunctioning in SVG files

My SVG animation dilemma:

@keyframes rotate  {
    100%  {
        -webkit-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

.keepRotatingOne  {
    -webkit-animation-name: rotate;
    -o-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

The issue I'm facing is with the rotation of the outermost ring in my SVG. Instead of rotating in place, it's moving away from its original position. To view the problem, check out this FIDDLE LINK.

Interestingly, when I apply the same animation to a div element, everything works perfectly fine. Here's an example showing the correct behavior: SEE HERE.

I'm puzzled as to why the animation isn't working on the SVG. Can anyone shed some light on this and provide a workaround solution?

htmlcsssvg

Answer №1

To bypass the issue with transform-origin in certain versions of Firefox, you can make some adjustments to your SVG file. Here's how:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800);
.st0 {
  fill: none;
  stroke: #31A6DE;
  stroke-miterlimit: 10;
}

.st1 {
  fill: #31A6DE;
}

.st2 {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
}

.st3 {
  font-size: 14px;
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

.keepRotatingOne {
  -webkit-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
<?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">

    <g transform="translate(549.9, 168)">
      <g class="keepRotatingOne">
        <polygon id="XMLID_1_" class="st0" points="537,301.5 564,301.5 569,275.8 594.7,267.5 613.3,287.1 635.7,271.7 625,247 637,233.7 
662.7,242.3 674.3,218 653.3,200.3 657.6,184 683.5,179.3 683.5,152 656.1,147.3 652.2,131 672.6,113.3 659.3,90.7 633.3,98.3 
619,84.3 630,64.3 607,49.7 590,68.3 568.3,62.3 563.7,34.5 537,34.5 531,62.3 506.3,69.5 488.3,49.6 465,64.7 476,89.7 465,102.3 
438,93.7 426.3,117.7 447,135 443,152 416.3,157 417,184.3 443.7,188.8 448.5,205.8 428.2,222.7 441.7,246.3 467.5,237.8 480,250.7 
470,274.3 492.3,287.8 510.5,269 532.5,275.5 " transform="translate(-549.9, -168)"/>
      </g>
    </g>
    <ellipse id="XMLID_3_" class="st0" cx="550.5" cy="168.5" rx="91.6" ry="89.5" />
    <text id="XMLID_4_" transform="matrix(1 0 0 1 519.3203 166.4999)">
      <tspan x="0" y="0" class="st1 st2 st3">ProCess</tspan>
      <tspan x="-36.4" y="16.8" class="st1 st2 st3">Standardization</tspan>
    </text>
  </svg>

How it operates

We adjust the polygon so that its center aligns with the origin (0,0). Then, we enclose the polygon within a group element and apply the rotation effect to that. This results in a cog that rotates around (0,0). Lastly, we nest that group within another one to reposition the cog back to its original location.

<g transform="translate(<back to original position>)">
  <g class="applyRotationAnimationToThisElement">
    <polygon transform="translate(<to the origin>)" ... />
  </g>
</g>

Two additional groups are necessary here because the object being rotated cannot have its own transform. Otherwise, it would be overridden by the CSS transformation and negate the intended effect.

Answer №2

It may be a little late, but I believe the issue has been resolved over time.

I managed to resolve it using the following code snippet:

.keepRotatingOne {
  -webkit-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transform-box: fill-box;
  transform-origin: center center;
}

Answer №3

To achieve the desired effect, the object needs to rotate on its own axis positioned at 50% from the top and 50% from the left of itself. Include this code in .keepRotatingOne:

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;

jsfiddle

2D transformations have the ability to adjust the x- and y-axis of an element. - w3s

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 steps can I take to prompt this function to modify the value of my input?

After recently delving into the world of JavaScript, I decided to create a background color generator that randomly changes when a button is clicked. This simple project involves two input fields (color1 & color2) which receive random values upon clicking ...

javascripthtmlcss

"Stylish footer design in CSS featuring a sleek overflow scrollbar

Perhaps the most straightforward way to demonstrate this is by providing a direct link to the website where the addition should be made. I am in desperate need of a basic footer that remains fixed at the bottom of the page, regardless of the amount of con ...

htmlcssfooter

Transition effects for website URLs

Is there a way to create a fade in/out effect for a URL when hovering over a Div element? I tried implementing it in a simple example on jsfiddle http://jsfiddle.net/7Ppbm/60/. $('.lnkDiv:visible').fadeOut(); var timer; $('.contDiv:visibl ...

jqueryhtml

Choose grandchildren elements within 2 tiers deep of the main div

I am currently working on a code to display 9 boxes in a layout reminiscent of a rubix cube. #child { height: 30px; width: 30px; float: left; margin: 1px; background-color: rgba(235, 26, 224, 0.829); } #outer { position: absolute; } < ...

css

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...

javascriptjquerycssopacity

Are there any alternatives to using <HR/> for creating lines in Bootstrap 3?

While working on my page design using Bootstrap 3, I noticed that the `` tag has too much margin. This is causing it to not fit well with the overall compact look of my page. Do you have any alternative options for drawing a line in Bootstrap 3 that woul ...

htmlcss

The function SVGGeometryElement.isPointInFill() may not function correctly in Chromium, but it does work properly in Firefox

I'm currently working on a solution to detect when a path within an SVG file on a canvas has been clicked. The code I've written functions correctly in Firefox, but I'm encountering issues with Chromium browsers. When I surround the code wit ...

javascripthtmlsvg

Tips for adding color to the <td> element in an ejs file using nodeJS

I am looking to incorporate a color into my .ejs file. Here is the code snippet I am working with: <% resultList.forEach(function(item, index){ %> <tr> <td><%= item.function %></td> <td><%= item.value %>< ...

javascripthtmlcssnode.jsejs

"Ensuring Proper Alignment of Labels and Inputs in Bootstrap for Varying Column

I'm encountering alignment issues with a large form that I'm working on. I have two columns at the beginning of the form where some rows occupy half of the width while others take up the full width. However, the problem arises with the alignment ...

csstwitter-bootstraptwitter-bootstrap-4

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

htmlangulartypescript

Track and log specific route requests with ExpressJS morgan feature

Hello, I am currently utilizing the NodeJS web framework Expressjs along with a middleware called morgan to log requests to a file. Here is my configuration: // create a write stream (in append mode) var accessLogStream = fs.createWriteStream(__dirname + ...

cssnode.jsexpress

Can you explain the distinction between using .classA versus .classB.classA when styling with CSS?

When I use .show instead of .box.show in the CSS, the even boxes do not come from the left side. This discrepancy has left me puzzled as I assumed they would have the same effect. However, it appears that in this particular code snippet, they are behaving ...

javascripthtmlcsscss-selectors

Enhance your HTML page functionality with the power of jQuery

I'm working on creating a HTML page with interactive options. I want to implement an option menu that will pop up when hovered over or clicked, allowing me to customize colors, background patterns, and more. It seems like this involves altering the CS ...

htmljquerycss

Using AngularJS, display a dropdown menu when clicking on a table cell

Is there a way I can change the value of a table cell to a dropdown list when clicking on that cell using AngularJS? For example, if I click on 7114, it should turn into a dropdown list with all VDN numbers. HTML table: <table class="table table-stri ...

javascripthtmlangularjsdropdown

How can I transfer a context dictionary from one view to another in Django?

I have a specific view set up for each page called the detail view, as well as a CommentView for allowing users to type comments directly on those pages. Inside the comment view, I create an instance of the Comment model that includes the content of the co ...

pythonhtmldjango

Storing multiple values in local storage

Hey there! I have a text box where I input grades, and they get saved in local storage. I can see them below the text box. Now, I want to add more text boxes for additional grades. How can I achieve this and ensure that the grades are saved in a separate a ...

javascriptjqueryarrayshtml

What is preventing me from modifying the icon on a dropdown menu?

I've been struggling to change my dropdown icon from the default "carrot" to a Fontawesome one. Despite researching other questions, I still can't find a solution that works for me. <form> <div class="form-group"> <select disab ...

htmlcssbootstrap-4

Having an issue with my Wordpress theme where the footer doesn't remain at the bottom of the page

Having trouble with my custom Wordpress theme that I can't seem to fix. Despite extensive research, the footer on my website refuses to stay at the bottom of the page and instead floats in the middle of posts and static pages. I've tried all sol ...

phphtmlcsswordpressweb

Three.js fails to render Blender model

After creating a basic blender model, I exported it as a .json file using the three.js plugin. However, when attempting to import the file into my project, I encountered some difficulties. As file transfers are restricted through file://, I uploaded the f ...

javascripthtmlthree.jsblender

The footer seems to detach on certain pages

Currently, I am facing a frustrating issue while working on a website. The footer seems to be disconnected from the main body content on certain pages, while on others, it appears to be properly attached. Despite my efforts to troubleshoot by removing elem ...

css