svg寫動畫 常用屬性的介紹
阿新 • • 發佈：2018-11-22
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container{ margin: 200px; } .g-rect-path{ fill:none; stroke-width: 10; stroke: #e9e9e9; stroke-linejoin: round; stroke-linecap: round; } .g-rect-fill{ /*svg畫布填充背景顏色*/ fill: none; /*畫筆的寬度*/ stroke-width: 10; /*畫筆的顏色*/ stroke:red; /*線條連線處樣式*/ stroke-linejoin: round; /*動態的畫筆頭部的樣式*/ stroke-linecap: round; /**/ stroke-dashoffset: 0; /*定義動畫*/ animation: linemove 2s ease-out infinite; } @keyframes linemove{ 0%{ stroke-dasharray: 0, 1350; } 100% { stroke-dasharray: 1350, 1350; } } </style> </head> <body> <div class="container"> <div class="line-wrap"> <!-- version:表示svg的版本，目前有1.0,1.1兩個版本 xmlns： http://www.w3.org/2000/svg (固定值) xmlns:xlink: http://www.w3.org/1999/xlink(固定值) xml:space: preserve（固定值） width|height：定義svg畫布的大小 viewbox： 定義了畫布上可顯示的區域，當viewBox的大小和svg不同時，viewBox在螢幕上的顯示會縮放至svg同等大小 --> <svg version='1.1' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load" width='300' height='200' viewbox='0 0 600 400'> <polyline points='5 5, 575 5, 575 200, 5 200' class="g-rect-path" /> <polyline points='5 5, 575 5, 575 200, 5 200' class="g-rect-fill" /> </svg> </div> </div> </body> </html>