Animating paths using Internet Explorer

Is it possible to animate an svg path "Fly-In" effect in Internet Explorer 11?

Here is an example:

@keyframes fadeInP {
    from
    {
        stroke-dashoffset:1000;
    }
  to {
    stroke-dashoffset: 0;
  }
}
.animate
{
 animation: fadeInP 10s linear infinite;
}

Using the following code snippet:

<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
 <path stroke-width='8' class = "animate" fill='none' stroke="#ffffff" d="M 0,0 C 100,10 200,80 300,15 " />
</svg>

This animation works in Firefox, but I have not been able to find a solution for achieving a similar effect in Internet Explorer.

Thank you for your help!

htmlcssinternet-explorersvg-animate

Answer №1

It seems that the best solution is to utilize JS and adjust the offset for each frame.

CSS-based SVG animations do not function in IE, nor do SMIL animations.

See a demo here

JS Code:

var p = document.querySelector('.animate'), 
    offset = 1000;

var offsetMe = function() {
  if(offset < 0) offset = 1000;
  p.style.strokeDashoffset = offset;
  offset--;
  
  requestAnimationFrame(offsetMe);
}

offsetMe();

Update as of January 26, 2015: the IE team is addressing this issue.

Update #2 Edge now offers support for this feature, but only with units (for example, stroke-dashoffset: 1000; will not work, but stroke-dashoffset: 1000px; will).

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 could be causing some elements to not be generated while utilizing HTTrack or Save All Resources on an HTML webpage?

I'm interested in understanding the code and logic behind an online game called Paper.io. In order to accomplish this, I decided to save the entire webpage along with its resources on my computer and observe how each element reacts individually. My ...

javascripthtmlcssweb-scraping

Styling with CSS will keep your content centered on the page, while the background

I'm looking to create a layout with the following specifications: The content wrapper will have a fixed size and be centered: .content { width:960px; margin:0px auto; } My issue is how to implement the left-aligned background bar for the su ...

htmlcss

Concealing a div element depending on the cookie value upon page load

I've been working on a project where I created a div element and used jQuery to toggle its visibility. My goal is to hide the div for 5 minutes when the user clicks on a "hide" button, and then show it again after reloading the page within that time f ...

javascriptjqueryasp.nethtml

Span within a span using Bootstrap

I am facing some challenges in figuring out how to nest a span within another span using Bootstrap. My objective is to have a centrally aligned block, with the following structure inside: - One row containing: - A block on the left (span6) ...

csstwitter-bootstraprowhtml

Preventing button movement during navigation collapse toggle click

I am working on setting up my navbar in the following way: [collapse] navbar icon links sign in button Although I have successfully set this up, the issue is that when the navbar collapse toggle is clicked, it shifts the sign-in button u ...

htmltwitter-bootstrapbootstrap-5

Tips for preventing multiple counter buttons from conflicting with one another

Currently, I am in the process of creating an online restaurant platform that allows customers to place food orders. To streamline this process, I am developing individual cards for each food item available on the menu. In addition, I am implementing butto ...

javascripthtmldom

When I set margin-top to auto to move the last item in the list to the bottom, the item ends up being clipped

I have a sidebar with 100% height that includes a div and a ul. The div will display an image at the top of the sidebar, while the ul will contain all the sidebar menu items. It is crucial that the div and ul remain separate and not combined. The challeng ...

htmlcss

Attempting to make a button display a hidden block element within a specific set, while also ensuring that all other elements are closed

I am facing an issue with my three field sets that are displayed one at a time after clicking a continue button on the previous set. Moreover, I have added an edit button to the parent of the recently closed fieldset so that users can reopen it. However, w ...

jqueryhtml

Issue with nested grid layouts within the 960 grid system

I recently started working on a personal hobby website and decided to utilize the 960 css grid system for organizing my HTML elements on the page. After grasping the basic concept, I went ahead and created a preliminary version of the website, which is ho ...

css960.gs

Using jQuery to generate columns depending on the quantity of occurrences of an element inside a specific Div

I've encountered a challenge while using a plugin that restricts access to the HTML, but allows for adding CSS and Javascript. I am aiming to achieve the following: Determine if a specific class within a div is active If it's 'active' ...

javascriptjqueryhtmlcss

swap out the CSS class for my own class dynamically

When I display HTML code like this <div class="btn btn-pagination"> <i class="fa fa-angle-right"></i> </div> and want to replace fa fa-angle-right with myClass when the page loads. I attempted: $(document).ready(function () { ...

javascriptjqueryhtmlcss

Easily switch between visible and hidden content by clicking on an image that functions as a swap or toggle

Hey there, I'm new to this and could really use your assistance, I'm looking for a simple show/hide toggle feature when clicking on an image, where it switches between a 'side arrow' and a 'down arrow' (similar to a dropdown) ...

javascriptjqueryhtmlcss

Show a variety of logos on the website based on the current date

I've been experimenting with displaying a unique logo on my website based on the current date (for example, showing a Christmas-themed logo during December). Here's what I have so far: <img class="logo" id="global_logo" sty ...

javascripthtml

Tips for adjusting a background image to be fixed horizontally with the background-attachment property without affecting the vertical

I am facing a challenge with aligning the background image inside the #main div with that of the body. Both backgrounds are similar and I want them to be properly aligned, but with only horizontal repeating on the #main background. The aim is to prevent th ...

htmlcss

Utilizing "beneath the scroll" on a bootstrap 5.1 webpage

I have a website built with Bootstrap and I am looking to implement a "below the flow" positioning for the footer, preferably using CSS. I have been referring to it as "below the fold," although I'm not sure if that is the correct terminology to use. ...

htmlcssbootstrap-5

Utilize HTML/CSS for text that changes automatically

Is it possible to dynamically change text using HTML and CSS based on the page being viewed? For example, when on the home page, the text would automatically display "Home Page" without needing manual changes on each page. I want this process to be seamles ...

htmlcss

Issue with .submit() not submitting form after setTimeout timer runs out

How can I add a delay after a user clicks submit on a form before it actually submits? I have an image that appears when the click event is triggered, but the form never actually submits... This is the HTML form in question: <form class='loginFor ...

javascriptjqueryhtml

Validation of forms in JavaScript, submission only occurs if the data is deemed to be

I am currently working on a JavaScript validation for a Perl form. The validation script is working correctly to display errors when data is missing. However, I am facing an issue where the form still submits after displaying the error messages. I believe ...

javascripthtmlformsfunctionvalidation

Avoid executing PHP scripts when JavaScript validation fails

I have a basic html registration form that utilizes the onsubmit = "return validateForm()" function, where validateForm() is implemented in javascript to verify that input data is entered correctly and ensure that email and password fields match their resp ...

javascriptphphtmlmysql

Does text alignment apply to one tag but not the other?

Hello, I am in the process of creating a basic webpage and encountering some formatting issues. When I apply the style format to one element, it aligns perfectly, but for another element it doesn't seem to be working. I'm certain it's a simp ...

htmlcss