How to animate SVG element transformations (rotation & scaling) on Internet Explorer

Question

How to animate SVG element transformations (rotation & scaling) on Internet Explorer

My SVG element, an arrow spinning around a circle with scale animation using transform and transition properties, works smoothly in the latest versions of Chrome, Opera, and Firefox. However, in Internet Explorer, the animation does not occur as expected because the SVG element requires the use of the transform attribute instead of CSS transformation.

Although I have tried to apply the same transform to the attribute dynamically in my script, the animation still "skips" to the final position without transitioning. You can see a demonstration of this issue on JSFiddle: https://jsfiddle.net/rv28ezfw/3/

I am now seeking a solution or plugin that can handle animation in IE without affecting the functionality in other browsers. One option I came across is the jQuery SVG plugin by Keith Wood and a demo on CSS-Tricks.com that addresses SVG transforms in IE as well. While I prefer a simpler solution, I am open to recommendations for either of these approaches.

javascript jquery css svg

Answer 1

Answer №1

I couldn't pinpoint the issue causing it to malfunction in IE11. However, I devised a workaround:

$('#btn').click(function() {
  // Altered for smoother demo.
  $('#container').toggleClass('rotated');
});

#container {
  /* Adjusted size for better snippet appearance */
  width: 300px;
  height: 300px;
  /* For visibility */
  border: 1px solid black;
  /* Made transparent to prevent overlap with other elements */
  background: rgba(0,0,0,0);
  /* Allows events to pass through */
  pointer-events: none;
  /* Transition effect moved from SVG */
  transition: all 1.5s ease;
}
/* New addition */
#container.rotated {
  transform: rotate(45deg);
}

#btn {
  padding: 10px;
  color: #fff;
  text-align: center;
  background: green;
}

.cls-1 {
  fill: #2bffaa;
}

.cls-2 {
  fill: #ccc;
}

.cls-3 {
  fill: #f2f2f2;
}

.cls-4 {
  fill: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">GO</div>
<div id="container">
  <svg id="scroller" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
    <title>demo</title>
    <path id="scroller__outer" class="cls-1" d="M240,147a92.93,92.93,0,0,0-28.29,4.39l5.14,12A80.1,80.1,0,1,1,179.23,188L132.31,226.4c13.11,3.06,15.18,4.06,15.18,4.06S147,236.78,147,240A93,93,0,1,0,240,147Z" />
    <path id="scroller__inner" class="cls-2" d="M240,158a84.78,84.78,0,0,0-23.82,3.86l1.76,4.13,6.59,15,0.68,1.44A59.46,59.46,0,1,1,190.56,207l-0.92-1.44-9.17-15.41L179.23,188c-12,14-21.22,32.14-21.22,52,0,44.18,37.82,82,82,82s82-37.82,82-82S284.18,158,240,158Z"
    />
    <circle id="scroll__inner__circle" class="cls-3" cx="240" cy="240" r="51.5" />
    <path id="scroll__inner__outline" class="cls-4" d="M240,179a61,61,0,1,0,61,61A61,61,0,0,0,240,179Zm0,117a56,56,0,1,1,56-56A56,56,0,0,1,240,296Z" />
  </svg>
</div>

In summary, I opted to rotate #container instead of the SVG itself. Then, I transferred the transforms to #container.

By rotating a div, there's a possibility of corners overlapping underlying elements. In this demonstration, I made it translucent but outlined the borders for visibility. With pointer-events: none, users can still interact with the "GO" button even if a corner of the div overlaps it.

You could also adjust your SVG layout to reduce the excess white space surrounding the icon.

Answer 2

I couldn't pinpoint the issue causing it to malfunction in IE11. However, I devised a workaround:

$('#btn').click(function() {
  // Altered for smoother demo.
  $('#container').toggleClass('rotated');
});

#container {
  /* Adjusted size for better snippet appearance */
  width: 300px;
  height: 300px;
  /* For visibility */
  border: 1px solid black;
  /* Made transparent to prevent overlap with other elements */
  background: rgba(0,0,0,0);
  /* Allows events to pass through */
  pointer-events: none;
  /* Transition effect moved from SVG */
  transition: all 1.5s ease;
}
/* New addition */
#container.rotated {
  transform: rotate(45deg);
}

#btn {
  padding: 10px;
  color: #fff;
  text-align: center;
  background: green;
}

.cls-1 {
  fill: #2bffaa;
}

.cls-2 {
  fill: #ccc;
}

.cls-3 {
  fill: #f2f2f2;
}

.cls-4 {
  fill: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">GO</div>
<div id="container">
  <svg id="scroller" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
    <title>demo</title>
    <path id="scroller__outer" class="cls-1" d="M240,147a92.93,92.93,0,0,0-28.29,4.39l5.14,12A80.1,80.1,0,1,1,179.23,188L132.31,226.4c13.11,3.06,15.18,4.06,15.18,4.06S147,236.78,147,240A93,93,0,1,0,240,147Z" />
    <path id="scroller__inner" class="cls-2" d="M240,158a84.78,84.78,0,0,0-23.82,3.86l1.76,4.13,6.59,15,0.68,1.44A59.46,59.46,0,1,1,190.56,207l-0.92-1.44-9.17-15.41L179.23,188c-12,14-21.22,32.14-21.22,52,0,44.18,37.82,82,82,82s82-37.82,82-82S284.18,158,240,158Z"
    />
    <circle id="scroll__inner__circle" class="cls-3" cx="240" cy="240" r="51.5" />
    <path id="scroll__inner__outline" class="cls-4" d="M240,179a61,61,0,1,0,61,61A61,61,0,0,0,240,179Zm0,117a56,56,0,1,1,56-56A56,56,0,0,1,240,296Z" />
  </svg>
</div>

In summary, I opted to rotate #container instead of the SVG itself. Then, I transferred the transforms to #container.

By rotating a div, there's a possibility of corners overlapping underlying elements. In this demonstration, I made it translucent but outlined the borders for visibility. With pointer-events: none, users can still interact with the "GO" button even if a corner of the div overlaps it.

You could also adjust your SVG layout to reduce the excess white space surrounding the icon.

How to animate SVG element transformations (rotation & scaling) on Internet Explorer

Answer №1

Similar questions

Is it possible to incorporate a CSS3 transition into the styling of a list of images?

Using TypeScript to pass an array list as a parameter in the HTTP native GET method

Include the image source in the array

Eliminate extraneous space with the clearfix:after pseudo-element

Tips on changing an image with a button click

The Power of Ajax in PDF Retrieval

Methods for invoking a function from a separate .js file within React Native Expo

Electron framework experiencing compatibility issues with JQuery

Shifting an HTML anchor to account for a stationary header - Safari compatibility with alternative CSS styling

date-fns | display date

Unusual Type Inference in Typescript {} when Evaluating Null or Undefined

Issues with the inline display of dropdown list and label in Asp.Net

The browser fails to render an EJS-generated page when responding to a Fetch request

The DataTable fails to refresh following modifications to the HTML table

Using Select2 JS to populate dropdown options with an AJAX response

Utilize jQuery to bind JSON data to a form before sending it off

Organize and display a list of contacts alphabetically by the first letter of their

What could be causing the JSON String decode error to occur while utilizing extjs ajax?

The leave animation for Angular's ngAnimate and ng-view feature appears to be malfunctioning

Maximizing Efficiency of Vendor Bundle in Angular 2 with Webpack