Achieving a pulsating SVG animation that functions properly in Internet Explorer

I have an animated SVG that pulses, and while it works in most browsers, it does not function properly in IE.

Is there a way to make this animation work in IE without using an animated GIF as a workaround?

Check out the code on CodePen

<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"
     width="179.734px" height="179.736px" viewBox="0 0 179.734 179.736" enable-background="new 0 0 179.734 179.736"
     xml:space="preserve">

    <g transform="translate(80,80)">
        <g id="pulse_2">
            <path opacity="1" fill-opacity="0" stroke="#fff" stroke-width="3" stroke-miterlimit="10" d="M120.864,99.676c0,11.599-9.401,21-21,21c-11.598,0-21-9.401-21-21c0-11.598,9.402-21,21-21c6.705,0,12.679,3.144,16.523,8.037C119.193,90.281,120.864,94.783,120.864,99.676z" transform="translate(-100 -100)" />
            <animateTransform attributeType="xml" attributeName="transform" type="scale" begin="0s" from="0" by="2" dur="2s" fill="freeze" repeatCount="indefinite" />
            <animate attributeType="xml" attributeName="fill-opacity" from="0" to="0" values="0;0.5;0" dur="4s" repeatCount="indefinite" fill="freeze" />
        </g>
    </g>
    <g id="centre">
        <circle cx="80" cy="80" r="50" fill-opacity="0" stroke-width="10" stroke="#fff" />
    </g>
</svg>
javascripthtmlcssinternet-explorersvg

Answer №1

Unfortunately, Internet Explorer does not have built-in support for SMIL, which includes the animae and animateTransform tags. However, developers can utilize a JavaScript shim known as fakeSmile to provide IE with this missing functionality.

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

The custom classes I have created in Material UI are being overshadowed by the default classes provided by Material UI

I am trying to change the color of a TextField label to black when it is focused. I used classes in InputProps with a variable, but unfortunately, the default styling of material UI is taking precedence in chrome dev tools. Below is the code snippet. Pleas ...

javascripthtmlcssreactjsmaterial-ui

Adjust the font color of the legend text in forceNetwork within networkD3

When using the forceNetwork function from the networkD3 R package, is there a way to change the text color in the legend to white? This is my code snippet: library(networkD3) forceNetwork(Links = subLinkList, Nodes = subNodes, Source = "ro ...

javascriptrd3.jshtmlwidgetsnetworkd3

Stop the http requests in Angular as the user continually types in the autocomplete input field

Currently, I have an input field that utilizes a material autocomplete component. This component makes calls to the server for results as the user types. While it is working correctly for now with the server returning results in order, I am looking for a ...

javascriptangularrxjs

Guide on implementing a scroll feature for a div element with a fixed width that contains a dynamically generated table with td elements of fixed width in HTML

Struggling with HTML formatting. I'm facing an issue where I have a table nested inside a div. The div has a fixed width of 200px and the td elements are added dynamically. Despite setting each td to be 100px wide, when five td elements are added, to ...

htmlcssinternet-explorer

The functionality of clicking on Google Visualization table chart to return row/column values is malfunctioning on Mozilla browser

I'm facing an issue with the code below that seems to behave differently in Chrome and Mozilla browsers. In Chrome, when a cell is clicked, the code successfully returns the row / column clicked. However, in Mozilla, clicking a cell does not trigger ...

javascriptgoogle-chromechartsgoogle-visualizationmozilla

React component failing to display CSS transitions

The task at hand requires the component to meet the following criteria: Items in a list should be displayed one at a time. There should be two buttons, Prev and Next, to reveal the previous or next item in the list. Clicking the Back/Next button should tr ...

cssreactjstransition

Transform [object HTMLDocument] to a String

Could someone guide me in converting the newHTMLDocument object into a full string including the doctype and html tag? let newHTMLDocument = document.implementation.createHTMLDocument(); let html = `<!DOCTYPE html> <html> <head> ...

javascripthtmldom

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?

My attempt to create a form in Angular 7 has resulted in an error message: ERROR TypeError: "_co.service.formData is undefined" Here is the HTML code for the component: <form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm"> <div clas ...

javascriptangulartypescriptangular7

Performing a Mongoose query using the "find" method on multiple fields at once

I am currently developing an API using Node.js, Express, and MongoDB for a product available in the market. Each product has a title, brand, image, quantity, and other details. Our goal is to allow users to search for products by both title and brand in a ...

javascriptnode.jsmongodbexpressmongoose

Transfer the information of a selected element to a different element

Hello, I am trying to transfer content from a child element to another element. In my HTML setup, there is a hidden div named "DetailsExpanded" and multiple items called "IconWrapper". When an "IconWrapper" is clicked, I want to copy the content of its "I ...

javascriptjqueryhtmlcss

Issues with refreshing Datatables functionality

I’ve hit a roadblock while troubleshooting this issue, and it’s gotten quite frustrating. That's why I've turned to Stackoverflow for help once again. As a beginner, I ask for your patience and thank you in advance for any assistance. In my ...

javascriptjqueryruby-on-railsajaxdatatable

What steps can I take to resolve the issue of the "self signed certificate in certificate chain" error while trying to install plugins on VS Code?

After setting up VS Code on my Windows 7 x64 system, I encountered an issue when trying to install plugins - I kept receiving the error message "self signed certificate in certificate chain". Despite setting "http.proxyStrictSSL": false, I was still unable ...

javascriptnode.jssslvisual-studio-codevscode-extensions

Configuring IP Whitelisting for Firebase Cloud Functions with MongoDB Cluster

What is the process for including my Firebase Cloud Functions in the IP whitelist of my MongoDB cluster? Error Message: ...

javascriptmongodbfirebaseexpressgoogle-cloud-functions

`Vue.js child component not reflecting updated prop value`

Created a functionality within the App.vue parent component to communicate with all child components, instructing them to close any open modals. Additionally, implemented a feature for a child component to notify the parent to hide the overlay when the mai ...

javascriptvue.jsfrontendvue-componentvue-router

Mongoose Error: The function 'mongooseSchemahere' is not recognized as a valid function

Here is the mongoose Schema setup in models/user.js: const mongoose = require('mongoose'); const userSchema = mongoose.Schema({ loginId: String, firstname: String, lastname: String, eMail: String, password: String, acti ...

javascriptnode.jsmongodbexpressmongoose

Encountered a JQuery error in the application: trying to call the 'open' method on dialog before initialization is complete

I am having trouble integrating a dialog box into my application and encountering the error mentioned above. Here is the jQuery code I'm using: $( "#dialog" ).dialog({ autoOpen: false, width: 450, modal: true, ...

javascripthtmljquery

Implement a Bootstrap button that can efficiently collapse all elements in one click

Within my HTML file, I have included the following code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="list-group list-group-flush"> <a href="javascript: void(0)" da ...

javascripthtmljquerytwitter-bootstrapbootstrap-4

Tips for aligning text vertically within a definition list

I am working on a definition list where I need to vertically center the text within each dd element. dl, dt, dd { margin:0; } dt { background: blue; } dd { min-height: 100px; background: gold; border-bottom: 3px solid white; } <dl ...

htmlcss

Troubles with showcasing icons on a website

I need some help with a minor issue that I'm stuck on. I'm trying to display an information icon that, when clicked, opens a pdf. The strange thing is that the icon doesn't show up on the page even though it exists on the server. However, wh ...

javascripthtmljsp

Got a value of `false` for an attribute `closable` that is not meant to be a

Here's the code snippet I have: import { Modal } from "antd"; import styled from "styled-components"; export const StANTModal = styled(Modal)` & .ant-modal-content { border-radius: 20px; overflow: hidden; } `; And ...

javascriptreactjstypescriptantdstyled-components