Question

我有这个微调器：

我想将它转换为SMIL ...我从未使用它，所以这是我的第一次尝试，从逻辑上说它不起作用：

<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>

我做错了什么？

PS：第二次尝试，仍然无法正常工作，圆圈是彩色的，但它没有正确旋转：

<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>

编辑：

固定！以下是最终结果：codepen

将SVG / CSS转换为SVG / SMIL

0 个答案: