Как вращать прямоугольник вокруг своей оси во время его движения?

Question

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

Answer 1

Лучше использовать для перемещения команду трансформации 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>

Пример с повторным вращением с паузой 1s в конце анимации

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>

БЛОГ НА HUSL

Как вращать прямоугольник вокруг своей оси во время его движения?

Ответы (1 шт):