Efeito de foco: animação CSS ou animações da Web

Problema:
A tag animate do SMIL está obsoleta e as transições de foco CSS precisam ser implementado para substituí-lo.

Solução:
Remova as tags set e adicione CSS à pseudo-classe element_tpl:hover:

.element_tpl:hover {
    stroke-opacity: 0.5;
}

Efeito de dimensionamento após alteração

Problema:
anime o elemento para dimensionar algumas vezes após uma alteração confirmada.

Solução:
Considere as seguintes opções:

1. Animação CSS: Use quadros-chave CSS para obter dimensionamento:

@keyframes scale-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

Em seguida, aplique a animação ao elemento:

.element_tpl {
    animation: scale-animation 0.5s infinite alternate;
}

2. Animações da Web: Use a API de animações da Web para controlar programaticamente o dimensionamento:

// Create a new animation
const animation = document.timeline.addAnimation();

// Define keyframes
const keyframes = [
    { transform: 'scale(1)', offset: 0 },
    { transform: 'scale(1.12)', offset: 0.5 },
    { transform: 'scale(1)', offset: 1 }
];

// Apply keyframes to the animation
animation.effect = keyframes;

// Target the element
animation.target = document.querySelector('.element_tpl');

Aumentar e diminuir ao clicar

Problema:
Animar o elemento para aumentar e para baixo ao clicar.

Solução:

1. Transições CSS: Use transições CSS para acionar as alterações de escala em eventos de mousedown e mouseup:

.element_tpl {
    transition: transform 0.2s;
}

.element_tpl:active {
    transform: scale(1.1);
}

2. Animações da Web: Use a API de animações da Web para manipular o evento de clique e dimensionar o elemento de acordo:

// Add event listener
document.querySelector('.element_tpl').addEventListener('click', (event) => {

    // Create a new animation
    const animation = document.timeline.addAnimation();

    // Define keyframes
    const keyframes = [
        { transform: 'scale(1)', offset: 0 },
        { transform: 'scale(1.1)', offset: 0.2 },
        { transform: 'scale(1)', offset: 0.4 },
    ];

    // Apply keyframes to the animation
    animation.effect = keyframes;

    // Target the element
    animation.target = event.target;
});

Salvando animações SMIL

Problema:
Transferir animações SMIL para CSS ou animações da Web.

Solução:
Use o polyfill SMIL criado por Eric Willigers: https://github.com/ericwilligers/svg-animation. Este polyfill converte animações SMIL em animações da Web, fornecendo uma forma alternativa de implementá-las.