Svg animation with css - fallback IE

Question

What is the best fallback option for IE without CSS / SVG animation support?

Answer 1

Keep @m_a's answer checked, just wanted to explain all the available options, as a reserve for people who read the question later and are looking for an answer.

Before listing all the options currently available, by looking at http://caniuse.com/#search=svg , this basic support for SVG in IE9 + with this problem, though

IE9-11 SVG. , , viewBox CSS, -, .

, IE9 +, SVG, IE8 SVG .

Sprite Animation" ⁽¹⁾ , , 20 / , .

1. CSS3 :

CSS3, transform , DOM, SVG, IE9 . CSS, " " CSS, steps(), < href= "http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps" rel= "nofollow noreferrer" > CSS sprite animation.

---

2. JavaScript

javascript 2005 2006 , -, - Flash, javascript, , javascript.

javascript -pure jQuery ⁽²⁾ CSS , , , .

, " " , , " " CSS, background position, - 'img' , overflow:hidden. .png, SVG , IE9 +.

JS- ⁽³⁾ :

• Greensock GSAP API, , IE6, js-, CSS , morphSVG .
• CreateJS Easeljs TweenJS], HTML -yeah right canvas IE8 , IE8, .

• Snap.svg SVG , IE9 + , IE8 , .

• RaphaelJS , IE6 +, , SVG W3C VML ⁽⁴⁾ DOM.

• Adobe Edge ⁽⁵⁾ HTML5 , , javascript. Edge Snap.svg , , .

---

3. :

⁽⁶⁾ - - , - CSS3 javascript, , Flash 2012 .

Flash , verdana, tahoma times new roman @font-face, , Adobe Illustrator .ae.

Flash IE, , , SVG, tweening, ⁽⁷⁾ , , , , javascript.

flash, "" CSS. .

---

1:

OP SVG, DOM -put javascript </body>, :

• Modernizr ⁽⁸⁾ - IE, , SVG - "inlinesvg", "svgclippaths" "svgfilters" - " ", , , .

• , IE , condepen Demo Fiddle ⁽⁹⁾ , , IE Version < 9 inline .svg .png.

• hack <!--[if IE]> stuff here <![endif]-->, IE, IE10 +, . :

  <!--[if lt IE 9]>
      <script src="repSVG.js"></script>
  <![endif]-->
  

, IE Than 9, lt letter-load repSVG.js, replaceSVG(), -

SVG , , " ", css, fix.css, CSS-, .svg , .png , :

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;
}

fix.css :

.foo { background:url(foo.png); }
.bar { background:url(bar.png); }

head :

• Modernizr fix.css head, SVG .

• :

  <link rel="stylesheet" type="text/css" href="main-style.css">
  <!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="fix.css">
  <![endif]-->
  

• Previous Fiddle, , IE, , fix.css head.

, , , style.css, fix.css background-image style.css.

^(*) CSS-Tricks: SVG.

---

2:

@kaiido SMIL ^{( 10)} polyfill, SMIL - SVG, , , , IE , IE VML, , OP.

@kaiido, fakesmile, :

SMIL, ECMAScript... SVG... FakeSmile IE .

, , MDN:

Chrome 45 SMIL CSS -.

CSS-Tricks

2015: SMIL, , . Sarah Drasner , .

---

⁽¹⁾. spritesheet

⁽²⁾. jQuery javascript, GSAP Createjs.

⁽³⁾. Greensock, EaselJS Snap.svg , , , CSS3.

⁽⁴⁾. (VML) - XML, Microsoft, IE5 - IE8, , IE9, MS Office 2000 .

⁽⁵⁾. Adobe Edge.

⁽⁶⁾. - , .swf, , SWiSH Max, .

⁽⁷⁾. ActionScript - , Flash, ECMAScript, javascript.

⁽⁸⁾. , , , , - , IE, Safari5 Opera12, ' t , IE , SVG .

⁽⁹⁾. , IE8, SVG, PNG, , IEversion < 9 IEversion < 14, , IE, IE . , , Microsoft IE, SVG- CSS, IE16, , - .

⁽¹⁰⁾. SMIL - , XML, SVG, SVG SMIL

Answer 2

IE ( , , IE11 - ) SVG CSS3. : CSS3 .

Javascript , , . GIF - . : fooobar.com/questions/547732/...