Effet de survol : animation CSS ou animations Web

Problème :
La balise d'animation de SMIL est obsolète et les transitions de survol CSS doivent être implémenté pour le remplacer.

Solution :
Supprimez les balises définies et ajoutez du CSS à la pseudo-classe element_tpl:hover :

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

Effet de mise à l'échelle en cas de modification

Problème :
Animez l'élément pour le mettre à l'échelle plusieurs fois lors d'une modification validée.

Solution :
Considérez les options suivantes :

1. Animation CSS : Utilisez des images clés CSS pour réaliser la mise à l'échelle :

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

Appliquez ensuite l'animation à l'élément :

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

2. Animations Web : Utilisez l'API Web Animations pour contrôler la mise à l'échelle par programmation :

// 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');

Agrandir et réduire en cliquant sur

Problème :
Animer l'élément pour l'agrandir et vers le bas en cliquant.

Solution :

1. Transitions CSS : Utilisez les transitions CSS pour déclencher les changements d'échelle sur les événements mousedown et mouseup :

.element_tpl {
    transition: transform 0.2s;
}

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

2. Animations Web : Utilisez l'API d'animations Web pour gérer l'événement de clic et redimensionner l'élément en conséquence :

// 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;
});

Enregistrement des animations SMIL

Problème :
Transférer les animations SMIL vers des animations CSS ou Web.

Solution :
Utilisez le polyfill SMIL créé par Eric Willigers : https://github.com/ericwilligers/svg-animation. Ce polyfill convertit les animations SMIL en animations Web, offrant ainsi un moyen alternatif de les implémenter.