How do you spin a rectangle around your axis during his movement?



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

    by <animateTransform> ?



  • Better use the transformation team to move. translate() it is less resource-intensive than the change in coordinates 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>

    Example of reversal with 1s at the end of animation

    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>


Log in to reply
 

Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2