O SVG to attribute indica o valor inicial de um atributo. É usado com o atributo from .

Sintaxe:

to = "number"

Valores de atributo:

  • número: este valor de atributo contém o número no qual queremos definir o atributo.

Usaremos o atributo to para definir o valor inicial.

Exemplo 1:

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

Saída:

Exemplo 2:

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

Saída: