主页 / 问题 / 1346656
Accepted
ivan
Asked:2022-04-07 03:34:45 +0000 UTC2022-04-07 03:34:45 +0000 UTC

如何在移动时围绕其轴旋转矩形？

  • 772
 <?xml version="1.0" standalone="no"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg"
 width="1500" height="1500">
 
    <rect x="100" y="100" width="10" height="20" stroke="black" stroke-width="3" fill="none">
        <animate attributeName="x" to="500" dur="2s" repeatCount="indefinite"/>
    </rect>
        
</svg>

使用<animateTransform>？

svg

1 个回答

  1. Best Answer

    移动最好使用transformation命令，translate()相对于改变坐标，资源消耗更少x

    <svg xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg"
 width="1500" height="1500">
    <polyline stroke="silver" points="105,110 600,110" />
     <g id="rectMove"> 
    <rect x="100" y="100" width="10" height="20" stroke="black" stroke-width="3" fill="none">
           <!-- Вращение прямоугольника      -->
     <animateTransform id="an_rot" " attributeName="transform" type="rotate" begin="0s" dur="0.8s"
      values="0 105 110;360 105 110" repeatCount="indefinite" />  
    </rect>  
            <!-- Перемещение прямоугольника -->
      <animateTransform id="an_tr"  attributeName="transform" type="translate" begin="0s" dur="12s"
      values="10;500" repeatCount="1" />      
    </g>
       
</svg>

    动画结束时暂停 1 秒的重新旋转示例

    begin="0s;an_tr.end+1s"

    <svg xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg"
 width="1500" height="1500">
    <polyline stroke="silver" points="105,120 600,120" />
     <g id="rectMove"> 
    <rect x="100" y="100" width="10" height="20" stroke="black" stroke-width="3" fill="none">
           <!-- Вращение прямоугольника      -->
     <animateTransform id="an_rot" " attributeName="transform" type="rotate" begin="0s" dur="0.8s"
      values="0 105 110;360 105 110" repeatCount="indefinite" />  
    </rect>  
            <!-- Перемещение прямоугольника -->
      <animateTransform id="an_tr"  attributeName="transform" type="translate" begin="0s;an_tr.end+1s" dur="12s"
      values="10;500" repeatCount="1" />      
    </g>
       
</svg>

    • 4

相关问题