title: SVG animation doesn't run on IE9/IE10
body: <p>Hi I have a piece of <code>HTML</code> code which basically does an SVG animation. This works fine in Chrome as well as Firefox but not in IE9/IE10.</p>
  
  <p>Any solution?</p>
  
  <p>Need single codebase which works at least in Chrome/Firefox/IE 9 and above.    </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id='svgnotsupported' style='visibility: hidden;'&gt;
          &lt;h1&gt;This application requires SVG support&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div id='svgsupported' style='visibility: hidden'&gt;&lt;/div&gt;
  
      &lt;script&gt;
  
          var svgsupport;
  
          window.onload = function supportsSvg() {
  
              var ua = navigator.userAgent;
              var M = ua.match(/(chrome)\/?\s*(\.?\d+(\.\d+)*)/i);
              var b =   document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure",  "1.0")
              if(b || M) {
                  svgsupport = document.getElementById('svgsupported');
              } else {
                  svgsupport = document.getElementById('svgnotsupported');
              }
  
              svgsupport.style.visibility = 'visible';
  
          }
  
      &lt;/script&gt;
  
      &lt;svg id="no_fewer_than_N_events_E_between_event_Q_and_first_R_thereafter" width="588" height="578" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;defs&gt;
              &lt;marker id="Triangle" viewBox="0 0 20 20" refX="20" refY="10" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"&gt;
                  &lt;path d="M 0 0 L 20 10 L 0 20 z" fill="blue"/&gt;
              &lt;/marker&gt;
              &lt;marker id="Circle" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto"&gt;
                  &lt;circle cx="5" cy="5"  r="3" fill="blue"/&gt;
              &lt;/marker&gt;
          &lt;/defs&gt;
          &lt;g&gt;
              &lt;path id="_4JpShw3P09cVj6Vb1lR041" d="M 399.0,228.0 a 20.0 40.0, 0, 1, 0, 54.0 0.0" style="fill:none;stroke:blue ;stroke-width:3" marker-end="url(#Triangle)" /&gt;
              &lt;rect id="anim_4JpShw3P09cVj6Vb1lR041" x="-5" y="-5" width="10" height="10" fill="red"&gt;
              &lt;animateMotion  path="M 399.0,228.0 a 20.0 40.0, 0, 1, 0, 54.0 0.0" dur="5s" rotate="auto" repeatCount="indefinite" begin="1s"  /&gt;
              &lt;/rect&gt; 
          &lt;/g&gt;
          &lt;g&gt;
              &lt;rect id="_0uuE73jF5kmqe14s6Y02NF" x="372" y="165" rx="10.0" ry="6.0" width="109" height="63" style="fill:white;stroke:black;stroke-width:4;opacity:0.5"&gt;
                  &lt;animate id="anim_0uuE73jF5kmqe14s6Y02NF" attributeName="stroke" attributeType="CSS" from="lime" to="black" dur="2s" repeatCount="indefinite" /&gt;
              &lt;/rect&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>