Solucionado
quero fazer um circle em SVG aumentar de tamanho e para isso usei o código
svg { animation: aumenta-circulo 2s forwards }
@keyframes aumenta-circulo { to { transform: scale(2 , 2)} }
mas isso faz o círculo se movimentar (e aumentar). eu queria que o círculo apenas crescesse de tamanho (aumentar seu raio). como consigo esse efeito? por que scale faz esse comportamento de se movimentar ao invés de apenas aumentar seu raio? obr
Fala ai Rodrigo, tudo bem? Estranho, olhando o seus códigos, parecem estar ok, mas, posso estar deixando passar algum detalhe.
Consegue compartilhar o projeto comigo? Pode compartilhar através do Github ou Google Drive (zipado). Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.
Fico no aguardo.
<!DOCTYPE html>
<html>
<head>
<style>
#poder {
animation: aumenta 2s infinite;
}
@keyframes aumenta {
to { transform: scale(2) }
}
</style>
</head>
<body>
<svg width="500px" height="500px"id="svg1">
<circle cx="209px" cy="300px" r="10px" stroke="red" stroke-width="5px" fill="black" id="poder">
</circle>
</svg>
</body>
</html>eu deixei o código o mais simples possível pra ver se um elemento ou configuração não podia estar criando algum conflito. apenas um circulo e uma animação com scale e ela ainda se movimenta muito. já o quadrado consegue ficar minimamente parado (mas ainda se movimenta um pouco). eu encontrei outras formas para aumentar o circulo, mas queria entender o porquê desse comportamento com transform scale. muito obrigado
Fala ai Rodrigo, tudo bem? Isso acontece por conta do svg, as animações funcionam um pouco diferente comparado com elementos do HTML.
No seu caso, tente animar o circle usando a propriedade r, algo assim:
@keyframes aumenta {
from { r: 10px; }
to { r: 50px; }
}Espero ter ajudado.