Das Attribut SVG to gibt den Anfangswert eines Attributs an. Es wird mit dem from -Attribut verwendet .

 

Syntax:

to = "number"

Attributwerte:

  • Zahl: Dieser Attributwert enthält die Zahl, auf die wir das Attribut setzen möchten.

 

Wir werden das Attribut to verwenden, um den Anfangswert festzulegen.

Beispiel 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
          
        <rect x="10" y="10">
            <animate attributeName="width" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
  
            <animate attributeName="height" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
        </rect>
    </svg>
</body>
  
</html>

Ausgabe:

Beispiel 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
          
        <rect x="10" y="10" fill="green">
            <animate attributeName="width" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
  
            <animate attributeName="height" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
        </rect>
    </svg>
</body>
  
</html>

Ausgabe: