懸停效果：CSS 動畫或網頁動畫

問題：
SMIL 的animate 標籤已棄用，需要CSS 懸停過渡

解決方案：
去掉set標籤，在element_tpl中加入CSS：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動畫，提供了另一種實作它們的方法。