主页 / 问题 / 1596747
Accepted
Роман
Asked:2024-10-15 10:47:59 +0800 CST2024-10-15 10:47:59 +0800 CST

相对于画布对齐动画图标

  • 772

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 198 350" width="350px" height="198px" style="background: #ab9c9c;">
  <circle xmlns="http://www.w3.org/2000/svg" cx="77" cy="80.5" fill="none" stroke="#ff0000" stroke-width="25" r="120" stroke-dasharray="270">
     <animateTransform keyTimes="0;1" values="0 77 80.5;360 77 80.5" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"/>
  </circle>
</svg>

就是没法让它在中心，我通过浏览器改变参数，动画歪了，这样那样。但通过 Inkscape，动画消失了......

svg

2 个回答

  1. Best Answer

    您的圆圈不在画布的中心

    在此输入图像描述

    应该是这样的：

    在此输入图像描述

    调整圆参数并设置旋转中心动画后：

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 200" width="350px" height="200px" style="background: #ab9c9c;">
  <circle xmlns="http://www.w3.org/2000/svg" cx="175" cy="100" fill="none" stroke="#ff0000" stroke-width="25" r="75" stroke-dasharray="270">
     <animateTransform keyTimes="0;1" values="0 175 100;360 175 100" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"/>
  </circle>
</svg>

    • 4

  2. 动画选项

    圆弧旋转+改变空格
    和破折号值的动画。半径为 25 px 时，整个圆的长度为471。

    <animate attributeName="stroke-dasharray" dur="2s" values="30, 441; 441,30;30,441" repeatCount="indefinite" />， 在哪里

    30 - 条形的初始长度
    441 - 空间的长度

    请注意：
    30 + 441 = 471 - 条形和空格的长度之和等于整个圆的长度

    动画期间，线条长度增加，空间减小

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 200" width="350px" height="200px" style="background: #ab9c9c;">
  <circle class="crc" xmlns="http://www.w3.org/2000/svg" cx="175" cy="100" fill="none" stroke="#ff0000" stroke-width="25" r="75" stroke-dasharray="471" stroke-dashoffset="471" >
       <animateTransform keyTimes="0;1" values="0 175 100;360 175 100" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"/>  
    <animate attributeName="stroke-dasharray" dur="2s" values="30, 441; 441,30;30,441"  repeatCount="indefinite" />  
      
  </circle>
</svg>

    • 4

相关问题