代码: 全选
之前是:
如果本局有勝負結果,把boardBackground的 fill改為url("#boardNormal"),即「<set attributeName="fill" to="url(#boardNormal)" begin="fistart.begin"/>」,再加上某一方贏了set贏的那一方的fill,即「<set attributeName="fill" to="url(#boardFireWin)" begin="fivline.begin"/>」。
現在不需要往boardBackground內加兩個set,而改成:
如果本局有勝負結果,在boardBackground的下方新增「<rect x="4" y="4" width="472" height="472" rx="28" fill="url(#boardNormal)" stroke="#f7e7bd" stroke-width="4"><animate attributeName="opacity" values="1;0;0;0;0;0;0;1" begin="fivline.begin" dur="5s" fill="freeze"/></rect>」。代码: 全选
已修改 `addVictoryReplayAnimations` 函式裡的勝負閃爍效果:
**原本**是用 `<use href="#boardBackground">` 複製 `boardBackground`,這樣複製出來的元素會直接沿用當下 `boardBackground` 已經被 JS 設成的勝方顏色(`boardFireWin`/`boardIceWin`/`boardDraw`),而不是固定的一般盤面外觀。
**現在**改成直接建立一個新的 `<rect>`,屬性完全比照 `boardBackground` 的原始樣式硬編碼進去:
```js
const boardBackgroundNormal = createSVGElement('rect', {
x: '4',
y: '4',
width: '472',
height: '472',
rx: '28',
fill: 'url(#boardNormal)',
stroke: '#f7e7bd',
'stroke-width': '4'
});
```
再加上同樣的 `opacity` 動畫(`values="1;0;0;0;0;0;0;1"`、`begin="fivline.begin"`、`dur="5s"`、`fill="freeze"`),插入在 `boardBackground` 正下方。這樣這個蓋在上面的矩形固定顯示「一般盤面」外觀,不會受 `boardBackground` 實際 fill 值影響,勝負閃爍時才會正確地在「一般外觀」與「下方已經是勝方顏色的 boardBackground」之間切換/透出。