Question

我想将svg（SMIL）中的animate移植到javascript，因为IE不支持SMIL。任何指向如何将animate svg标记移植到javascript的指针。这是SMIL： -

<!DOCTYPE html>
<html>
<body>
 <svg class="splash-content-spinner" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28"  width="28" height="28">
    <path d="M1.5,13 A12.5,12.5 0 0,1 12.5,1.5" style="fill: none; stroke: #d8baf1;  stroke-width: 3;"> 
    <animate id="c1" attributeName="stroke" attributeType="CSS"  begin="0s;c4.end" dur="200ms" from="#d8baf1" to="#9d52dc" />
    </path>
     <path d="M15,1.5 A12.5,12.5 0 0,1 26.5,13" style="fill: none;stroke: #d8baf1;stroke-width: 3;">
    <animate id="c2" attributeName="stroke" attributeType="CSS"  begin="c1.end" dur="200ms" from="#d8baf1" to="#9d52dc" />
    </path>
      <path d="M26.5,15 A12.5,12.5 0 0,1 15,26.5" style="fill: none;stroke:#d8baf1;stroke-width: 3;">
    <animate id="c3" attributeName="stroke" attributeType="CSS"  begin="c2.end" dur="200ms" from="#d8baf1" to="#9d52dc" />
    </path> 
       <path d="M13,26.5 A12.5,12.5 0 0,1 1.5,15" style="fill: none;stroke: #d8baf1;stroke-width: 3;">
    <animate id="c4" attributeName="stroke" attributeType="CSS"  begin="c3.end" dur="200ms" from="#d8baf1" to="#9d52dc" />  
    </path>
</svg>
</body>
</html>

为IE支持smil到javascript

0 个答案: