悬停效果：CSS 动画或网页动画

问题：
SMIL 的 animate 标签已弃用，需要 CSS 悬停过渡

解决方案：
删除设置标签并将 CSS 添加到 element_tpl:hover 伪类：

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

更改时的缩放效果

问题：
使元素以动画方式在提交的更改后缩放几次。

解决方案：
考虑以下选项：

1. CSS动画：使用CSS关键帧实现缩放：

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

然后将动画应用到元素上：

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

2. 网页动画： 使用网页动画 API 以编程方式控制缩放：

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

点击时放大和缩小

问题：
动画元素放大和缩小俯视

解决方案：

1. CSS 过渡： 使用 CSS 过渡来触发 mousedown 和 mouseup 事件的比例变化：

.element_tpl {
    transition: transform 0.2s;
}

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

2. 网页动画： 使用网页动画 API 处理点击事件并相应缩放元素：

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

保存 SMIL 动画

问题：
将 SMIL 动画传输到 CSS 或 Web 动画。

解决方案：
使用 Eric Willigers 创建的 SMIL polyfill： https://github.com/ericwilligers/svg-animation。这个polyfill将SMIL动画转换为Web动画，提供了另一种实现它们的方法。