SVG para Atributo
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:
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva