Custom HTML Embedded SVG animation not working in IE 11?
Would there be a way to detect if a user is using IE 10 or IE 11 so
that it could display the animation as a single image that covers the
page, but otherwise use the wave animation?
You could use the following code to detect the browser version:
<style type="text/css">
body {
font: 1.25em sans-serif;
background-color:palegreen;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
body{
background-color:aqua;
}
}
</style>
More details, please check this thread.
Besides, about the SVG animation, as a workaround, I think you could try to use a .GIF file to display the animation (the wave), set it as the background image.
SVG animation is not working in Edge or IE
So after some research I found that in Edge, you have to be more specific when dealing with stroke-dashoffset and stroke-dasharray so instead of '0' you have to put '0px';
@keyframes stroke {
100% {
stroke-dashoffset: 0px; /* instead of stroke-dashoffset: 0; */
}
}
IE does not support CSS animations of SVGs and never will
Svg animation with css - fallbacks IE
Keep @m_a answer checked, just wanted to explain all available options as as fallback for people reading the question later and looking for an answer.
Before listing all options currently available having a look at http://caniuse.com/#search=svg will see that basic support for SVG in IE9+ with this issue though
IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.
so If you want to fallback IE9+ then you just keep using SVG, but for IE8 and below SVG file is not an option.
Also it is important to know the term "Sprite Animation" (1) which basically represents a step-based animation showing a new slide or image in each step in fractions of the second, for smooth animation 20+ slides/second is better so that not to have quirky to human eyes.
1. CSS3 Animation and Transition:
CSS3 animation and transition and also the transform property could be used for simple and basic animations applied on DOM elements other than SVG elements but it is not supported in IE9 and below. As well as animating animated CSS properties it is possible to create "sprite animation" with CSS animation by making use of steps() like in this CSS sprite animation example.
2. JavaScript
I've seen very complex javascript animation back in 2005 and 2006, and there was a website whose owner made two identical versions of the website one totally in Flash and the other totally in javascript -which was slightly quirky though- this is a very basic and simple pure javascript.
With javascript -pure or jQuery(2)- you can change CSS properties in general but mostly for simple animation you'll use properties like positioning, color changing and opacity.
As well as above implementing "sprite animation" is possible too like in these two examples which I just made to mimic the "sprite animation" example in the CSS part above applied first on background position property and second on an 'img' tag with its parent element having overflow:hidden. again the image is .png but you can use SVG in the same way if you're looking for a fallback for IE9+ only.
There are also other JS libraries(3) which could be used:
- Greensock with its GSAP API, is a good option since it is fast and provide fallback back to IE6, also could work with other js libraries as well as CSS and canvas, I like the way morphSVG works too.
- CreateJS [ Easeljs and TweenJS ] which works with HTML canvas -yeah right canvas are not supported in IE8 and below, there is a workaround for IE8 thought- and it provides exporting from flash files.
Snap.svg looks simple and nice and works with SVG means only IE9+ are supported, so if you want a fallback for IE8 and below you can't use this one.
RaphaelJS supports very old browsers including IE6+ and it produces scale-able vector because uses the SVG W3C and VML(4) as DOM objects.
Adobe Edge (5) lets you create HTML5 animation with an interface but I think it produces lots of javascript files. Also you can export from Edge to Snap.svg with some plugin I believe.
3. Flash:
Flash(6) was used as best option for web designers for creating cross-browser animation for almost a decade but gradually was abandoned due to presenting CSS3 animation and the revolution of javascript as well as the handheld devices which stopped supporting Flash since around 2012.
Flash creates vector based graphics and key-frames based animations as well as the ability to embedfonts as vector in times were verdana, tahoma and times new roman were default fonts of the web before @font-face, to have vector graphics you can use the drawing tools inside the program or import Adobe Illustrator .ae files.
You can use Flash as great fallback for IEs as it is supported since long time as well as it produces scale-able vector graphics just like SVG does and offers tweening but it has it's scripting language(7) which you mostly don't need unless if you want to offer interactions to the user, also -as far as I know- you can't access its structure with javascript.
Again for demonstration purposes I've also created this flash example which uses same "sprite animation" idea from the CSS part. Also created this vector graphics demo example .
UPDATE 1:
Upon a comment from the OP, for inline SVG, when DOM is ready -put javascript right before the closing </body> tag- you can do one of the following:
Use Modernizr (8) which detects individual features of the browser -all browser not IE only- to detect whether the browser supports SVG features - in the link I included "inlinesvg", "svgclippaths" and "svgfilters" features you can add or remove features - then hit build and download it, check the documentation to know how to use it.
Detect if the browser is IE or not, I modified this condepen and made this Demo Fiddle (9) to make a condition so that if it is IE and Version < 9 it replaces all inline
.svgwith the corresponding.png.There is this hack
<!--[if IE]> stuff here <![endif]-->, used to work in older IE version, but not on IE10+ it won't work. so you can have this:<!--[if lt IE 9]>
<script src="repSVG.js"></script>
<![endif]-->
Which basically means, if IE Less Than 9 -hence the lt letters- load repSVG.js which will contain only the replacement and the replaceSVG() function, check this Demo Fiddle
For SVG as backgrounds, like if you're doing a "sprite animation", create another css file, say fix.css, which contains identical naming of all CSS rules that have .svg backgrounds, but with .png images instead, like:
in you style.css:
.foo {
width:300px;
height:120px;
background:url(foo.svg);
background-size:300px 120px;
}
.bar {
width:200px;
height:50px;
background:url(bar.svg);
background-size:200px 50px;
}
in fix.css you have:
.foo { background:url(foo.png); }
.bar { background:url(bar.png); }
Then in the head section of your page do one of these:
Use Modernizr to load the
fix.cssin theheadif the browser doesn't support SVG as backgrounds.Again you can use this easy thing:
<link rel="stylesheet" type="text/css" href="main-style.css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="fix.css">
<![endif]-->Use same logic in the Previous Fiddle to detect if browser is IE and version is less that a certain version, then load
fix.cssagain in theheadsection.
Note that you need to make sure to have the method you chose from above after you load style.css so that when you load fix.css it will override the background-image properties of style.css.
(*) Check CSS-Tricks: Using SVG.
UPDATE 2:
Thanks to @kaiido for mentioning SMIL(10) with a polyfill, SMIL is a great option for SVG animation but the reason I didn't think it is an option it is because IE never adopted it, IE relied on its VML, this why I didn't think it would suit the OP.
Again thanks to @kaiido,I didn't know about this fakesmile which is:
SMIL implementation written in ECMAScript ... It is primarily targeted to SVG animations... FakeSmile makes declarative animations work in IE too.
However, I'm not sure if this fix will work in new versions of chrome, from MDN:
Chrome 45 deprecated SMIL in favor of CSS animations and Web animations.
Also from CSS-Tricks
Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.
(1). Examples of spritesheet images
(2). jQuery animation is slow compared to pure javascript animation, GSAP, or Createjs.
(3). I've seen Greensock, EaselJS and Snap.svg in action but not for complex animation though just simple things similar to CSS3 animation.
(4). Vector Markup Language (VML) is an XML-based markup used by Microsoft and is supported in IE5 - IE8 but is deprecated since the realese of IE9. it is also supported in MS Office 2000 and later.
(5). Adobe Edge showcase examples.
(6). As well as flash there are other software used to create .swf flash files but most of them don't offer rich features except SWiSH Max which offers good level of features.
(7). ActionScript is the scripting language used in Flash and it is ECMAScript syntax like javascript.
(8). Using feature detection is better than browser detection, because say someone uses an old browser other than IE, for example Safari5 or Opera12 then this fiddle won't fix it because it detects IE or not only not if the browser supports SVG or not.
(9). If you open the fiddle in any browser other than IE8 and below it will show SVG otherwise it show PNG, to experiment it change this IEversion < 9 to IEversion < 14 and you'll see this affect all IE existing IE in the time of this post. Notice that, in case later Microsoft decided to release an IE version that supports SVG animation with CSS, presumeably IE16, you can make another condition for that, something like this demo fiddle.
(10). SMIL stands for Synchronized Multimedia Integration Language, it has an XML-based syntax just like SVG, SVG animation using SMIL
SVG animation on I.E 11
The IE browser does not support CSS transforms on SVG elements, more detail information, please check this article.
As a workaround, I suggest you could try to display the circle using div, instead of SVG, please refer to the following samples: CSS3 Circle loader One Time around and CSS circle loader
Code as below:
<style>
body {
background: white;
}
body #container {
width: 200px;
height: 200px;
margin: 0 auto;
padding: 50px;
}
body #container #circle-loader-wrap {
overflow: hidden;
position: relative;
margin-top: -10px;
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
background-color: rgb(0, 148, 255,0.15);
border-radius: 200px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
body #container #circle-loader-wrap:after {
content: '';
position: absolute;
left: 15px;
top: 15px;
width: 170px;
height: 170px;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
body #container #circle-loader-wrap div {
overflow: hidden;
position: absolute;
width: 50%;
height: 100%;
}
body #container #circle-loader-wrap .loader {
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
border-radius: 1000px;
background-color: white;
}
body #container #circle-loader-wrap .left-wrap {
left: 0;
}
body #container #circle-loader-wrap .left-wrap .loader {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0 50% 0;
-webkit-transform-origin: 0 50% 0;
animation: loading-left 31s infinite linear;
-webkit-animation: loading-left 31s infinite linear;
}
body #container #circle-loader-wrap .right-wrap {
left: 50%;
}
body #container #circle-loader-wrap .right-wrap .loader {
left: -100%;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
transform-origin: 100% 50% 0;
-webkit-transform-origin: 100% 50% 0;
animation: loading-right 31s infinite linear;
-webkit-animation: loading-right 31s infinite linear;
}
@keyframes loading-left {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes loading-left {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
@keyframes loading-right {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes loading-right {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
Html Code:
</style>
<div id="container">
<div id="circle-loader-wrap">
<div class="left-wrap">
<div class="loader"></div>
</div>
<div class="right-wrap">
<div class="loader"></div>
</div>
</div>
</div>
The result like this:
Besides, there have another choice, we could make a .gif image to show the SVG animation, then, use tag to display it. Like this: <img src="https://i.stack.imgur.com/9CFNg.gif" width="100" height="100" />
The result like this:
Inline Animated SVG not loading in IE/Edge
IE11 does not support CSS animations of SVG elements. So you would need to use a different approach if you want to support non-Edge IE.
However Edge has supported CSS animations of SVG elements since build 10240.
The reason your animations aren't working on Edge is because Edge insists that you include units with CSS values. Other browsers are more forgiving with SVG values.
So to fix, add px to all your dasharray and dashoffset values.
.circle_animation {
stroke-dasharray: 440px;
stroke-dashoffset: 440px;
}
@keyframes html {
to {
stroke-dashoffset: 80px;
}
}
.item { position: relative; float: left;}
.item h2 { text-align:center; position: absolute; line-height: 125px; width: 100%;}
svg { transform: rotate(-90deg);}
.circle_animation { stroke-dasharray: 440px; stroke-dashoffset: 440px;}
.html .circle_animation { -webkit-animation: html 1s ease-out forwards; animation: html 1s ease-out forwards;}
.css .circle_animation { -webkit-animation: css 1s ease-out forwards; animation: css 1s ease-out forwards;}
@-webkit-keyframes html { to { stroke-dashoffset: 80px; }}
@keyframes html { to { stroke-dashoffset: 80px; }}
@-webkit-keyframes css { to { stroke-dashoffset: 160px; }}
@keyframes css { to { stroke-dashoffset: 160px; }}<div class="item html"> <h2>HTML</h2> <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/> </g> </svg></div>
<div class="item css"> <h2>CSS</h2> <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/> </g> </svg></div>Related Topics
How to Automatically Crop and Center an Image
Make the First Character Uppercase in Css
Specify Multiple Attribute Selectors in Css
Css Page-Break Not Working in All Browsers
Is !Important Bad For Performance
Calc of Max, or Max of Calc in CSS
Css: Display:Inline-Block and Positioning:Absolute
CSS Input with Width: 100% Goes Outside Parent's Bound
How to Change the Height of an Image in CSS :Before/:After Pseudo-Elements
Style Disabled Button With Css
Does CSS Hover Work on Mobile Devices
@Font-Face Anti-Aliasing on Windows and Mac
Display:Inline VS Display:Block
Bootstrap 4 Card-Deck with Number of Columns Based on Viewport