SVG描邊動畫

知識點：     stroke-dasharray 每個實線長度與相隔的距離     stroke-dashoffset 偏移量     document.getElementById('idpath').getTotalLength() 得到目標繪製長度（這裏是320）     設stroke-dasharray爲320 距離下一個也是320 相當於如果是畫這個正方形就是畫一個 然後 第二個不畫 第三個畫 第四個不畫 …… 然後設置偏移量320 就是第一個不畫，第二個畫第三個不畫……設置動畫修改stroke-dashoffset爲0 就相當於 一點一點的畫出第一個,如果設置成640 那麼將會以另外一個方向畫出來第一個      <?xml version="1.0" standalone="no"?> <!--<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">--> <!-- <path d="M 10 315--> <!-- L 110 215--> <!-- A 40 50 45 1 1 162.55 162.45--> <!-- L 172.55 152.45--> <!-- A 30 50 -45 0 1 215.1 109.9--> <!-- L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>--> <!-- <circle cx="10" cy="315" r="2" fill="red"/> --> <!-- <circle cx="110" cy="215" r="2" fill="red"/> --> <!-- <circle cx="162.55" cy="162.45" r="2" fill="red"/> --> <!-- --> <!--</svg>--> <style> #idpath{ /*stroke-dasharray: 100;*/ animation: asd 2s ease forwards; } @keyframes asd { /*from{*/ /* stroke-dasharray: 0;*/ /* stroke-dashoffset:320;*/ /*}*/ /*to{*/ /* stroke-dasharray: 320;*/ /* stroke-dashoffset:0;*/ /*}*/ from{ stroke-dasharray: 320; stroke-dashoffset:320; } to{ stroke-dasharray: 320; stroke-dashoffset:0; } } </style> <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="idpath" d="M90 10 H 10 V 90 H 90 L 90 10" id="shape" fill="none" stroke="blue" stroke-width="2"> <animate begin="shape.click" attributeName="d" dur="500ms" to="M20 20 H 90 V 90 H 10 L 20 20" /> </path> <!-- Points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="90" r="2" fill="red"/> </svg>