Convert SVG/CSS to SVG/SMIL -
i have spinner:
http://codepen.io/fezvrasta/pen/pjxovm
i’d convert smil… have never used first attempt , logically doesn’t work:
<svg width="65px" height="65px" viewbox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <animatetransform attributename="transform" type="rotate" values="0;270" begin="0s" dur="1.4s" fill="freeze" repeatcount="indefinite"/> <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"> <animatetransform attributename="transform" type="stroke-dashoffset" values="187;46.75;187" begin="0s" dur="1.4s" fill="freeze" repeatcount="indefinite"/> <animatetransform attributename="transform" type="stroke" values="#4285f4;#de3e35;#f7c223;#1b9a59;#4285f4" begin="0s" dur="5.6s" fill="freeze" repeatcount="indefinite"/> <animatetransform attributename="transform" type="rotate" values="0;135;450" begin="0s" dur="1.4s" fill="freeze" repeatcount="indefinite"/> </circle> </svg>
what doing wrong?
ps: second attempt, still not working, circle colored doesn't rotate correctly:
<svg class="material-spinner" width="65px" height="65px" viewbox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <animatetransform attributename="transform" type="rotate" values="0;270" begin="0s" dur="1.4s" fill="freeze" repeatcount="indefinite"/> <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"> <animate attributename="stroke-dashoffset" values="187;46.75;187" begin="0s" dur="1.4s" fill="freeze" repeatcount="indefinite"/> <animate attributename="stroke" values="#4285f4;#de3e35;#f7c223;#1b9a59;#4285f4" begin="0s" dur="5.6s" fill="freeze" repeatcount="indefinite"/> <animatetransform attributename="transform" type="rotate" values="0;135;450" begin="0s" dur="1.4s" fill="freeze" repeatcount="indefinite"/> </circle> </svg>
edit:
fixed! here final result: codepen
Comments
Post a Comment