將事件上的 SVG 元素從當前位置平滑移動到給定點

Question

我想在處理事件時將 SVG 元素（ image ）從其當前位置（無論它在哪里）緩慢移動到給定點。

由於不知道位置是什么，所以無法根據關鍵幀准備 CSS 動畫。

所以我嘗試通過 DOM 操作來完成任務：

var curX = parseFloat(image.getAttribute('x'));
var curY = parseFloat(image.getAttribute('y')); // Not used yet.
var curOpacity = parseFloat(image.getAttribute('opacity')); // Not used yet.

var animation = document.createElementNS(svgNS, 'animate');
animation.setAttribute('attributeName', 'x');
animation.setAttribute('from', curX);
animation.setAttribute('to', 0); // Move the image to the left border.
animation.setAttribute('dur', '2s'); // '3s', '5s'
animation.setAttribute('repeatCount', 1);

image.appendChild(animation);

如果我將持續時間設置為 3 秒或 5 秒，它會在添加animate元素后立即開始移動，但當動畫結束時，圖像會返回到原始位置。 （據我了解，這是設計使然，但我希望圖像保持其新位置）。

第二個問題是當我將持續時間設置為 2s 或更短時，圖像停止平滑移動，它只是閃爍到左邊框並返回（我不知道為什么）。

也許，有更好的方法？

更新

正如下面的回答，如果fill設置為freeze ，圖像將保持其位置。 要重現第二個問題，設置超時就足夠了：

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="inline-block mb-1"> <image href="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png" height="200" width="200" x="200" y="200"/> <script> // <![CDATA[ var startAnimation = function () { const svgNS = "http://www.w3.org/2000/svg"; var image = document.querySelector('image'); var curX = parseFloat(image.getAttribute('x')); var curY = parseFloat(image.getAttribute('y')); // Not used yet. var curOpacity = parseFloat(image.getAttribute('opacity')); // Not used yet. var animation = document.createElementNS(svgNS, 'animate'); animation.setAttribute('attributeName', 'x'); animation.setAttribute('from', curX); animation.setAttribute('to', 0); // Move the image to the left border. animation.setAttribute('dur', '2s'); // '3s', '5s' animation.setAttribute('repeatCount', 1); animation.setAttribute('fill', 'freeze'); image.appendChild(animation); }; document.addEventListener('DOMContentLoaded', () => window.setTimeout(startAnimation, 1000)); // ]]> </script> </svg>

圖像最初抽搐並僅在半路后才開始平穩移動。 鉻 102，x64。 至於我的計算機性能，基於window.requestAnimationFrame的動畫可以正常工作。

Answer 1

設置動畫的“填充”屬性：

 animation.setAttribute('fill', 'freeze');

有關更多詳細信息，請參見此處（MDN 文檔） 。

至於跳躍的動畫行為，在我的測試中沒有發生過，無論是在下面的實時示例中還是在獨立文件中。

活生生的例子

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="inline-block mb-1"> <image href="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png" height="200" width="200" x="200" y="200"/> <script> // <![CDATA[ document.addEventListener ( 'DOMContentLoaded', function () { const svgNS = "http://www.w3.org/2000/svg"; var image = document.querySelector('image'); var curX = parseFloat(image.getAttribute('x')); var curY = parseFloat(image.getAttribute('y')); // Not used yet. var curOpacity = parseFloat(image.getAttribute('opacity')); // Not used yet. var animation = document.createElementNS(svgNS, 'animate'); animation.setAttribute('attributeName', 'x'); animation.setAttribute('from', curX); animation.setAttribute('to', 0); // Move the image to the left border. animation.setAttribute('dur', '2s'); // '3s', '5s' animation.setAttribute('repeatCount', 1); animation.setAttribute('fill', 'freeze'); image.appendChild(animation); }); // ]]> </script> </svg>

更新

通過超時回調啟動動畫時 OP 的動畫顛簸問題可以通過將動畫元素的begin屬性設置為超時延遲來解決：

 animation.setAttribute('begin', '1s');