21
2017
03

SVG动画在IE11浏览器的支持

 


SVG动画的实现


方法1 :  CSS3 ,Chrome上没问题,这种不支持 IE11



   path[fill="#D79138"]{
      animation:anMPoint 1s ease 0s infinite alternate;
  }
  @keyframes anMPoint{
            from {fill: #D79138;}
            to {fill: red;}
  }
   @-webkit-keyframes anMPoint { 
            from {fill: #D79138;}
            to {fill: red;}
   }



方法2 :  animate,Chrome上没问题,这种不支持 IE11


<path fill="#D79138" d="M494.188,264.604c-2.146,0-3.879,1.733-3.879,3.879c0,1.651,3.879,7.758,3.879,7.758
 s3.879-6.107,3.879-7.758C498.149,266.337,496.416,264.604,494.188,264.604z M494.188,269.391c-0.66,0-1.155-0.495-1.155-1.155
 s0.495-1.156,1.155-1.156s1.155,0.496,1.155,1.156S494.848,269.391,494.188,269.391L494.188,269.391z">
    <animate attributeName="fill" attributeType="XML" from="lightgreen" to="red" begin="0s" dur="3s" fill="freeze"></animate>
</path>

 


方法3 ,  IE浏览器不支持基本的声明性动画

requestAnimationFrame


https://msdn.microsoft.com/library/gg193979(v=vs.85).aspx



<!DOCTYPE html><html><head>  
  <title>JavaScript SVG Animation</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <!-- Remove this line in production. --></head><body>
  <svg width="800px" height="800px" viewBox="0 0 800 800">
    <g transform="translate(400, 400)"> <!-- Create a Cartesian coordinate system (with the y-axis flipped) for the animated square. That is, place the origin at the center of the 800 x 800 SVG viewport: -->
  
      <!-- A 200 x 200 square with the upper left-hand corner at (-100, -100). This places the center of the square 
      at the origin (0, 0): -->  
      <rect id="mySquare" x="-100" y="-100" width="200" height="200" rx="5" ry="5" 
            style=" fill: orange; stroke: black; stroke-width: 3; stroke-dasharray: 10, 5;" />
            
      <!-- Represents the x-axis: -->
      <line x1="-400" y1="0" x2="400" y2="0" style="stroke: black;" /> 
    
      <!-- Represents the y-axis (although up is negative and down is positive): -->  
      <line x1="0" y1="-400" x2="0" y2="400" style="stroke: black;" /> 
                
    </g>
  </svg>
  <script>
    "use strict";    /* CONSTANTS */
    var initialTheta = 0; // The initial rotation angle, in degrees.
    var thetaDelta = 0.3; // The amount to rotate the square about every 16.7 milliseconds, in degrees.
    var angularLimit = 90; // The maximum number of degrees to rotate the square.
    var theSquare = document.getElementById("mySquare");

    theSquare.currentTheta = initialTheta; // The initial rotation angle to use when the animation starts, stored in a custom property.

    var requestAnimationFrameID = requestAnimationFrame(doAnim); // Start the loop.
    function doAnim() {      if (theSquare.currentTheta > angularLimit) {
        cancelAnimationFrame(requestAnimationFrameID); // The square has rotated enough, instruct the browser to stop calling the doAnim() function.
        return; // No point in continuing, bail now.
      }

      theSquare.setAttribute("transform", "rotate(" + theSquare.currentTheta + ")"); // Rotate the square by a small amount.
      theSquare.currentTheta += thetaDelta;  // Increase the angle that the square will be rotated to, by a small amount.
      requestAnimationFrameID = requestAnimationFrame(doAnim); // Call the doAnim() function about 60 times per second (60 FPS), or about once every 16.7 milliseconds until cancelAnimationFrame() is called.
    }  </script></body></html>





« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。