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

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

由于不知道位置是什么，所以無法根據關鍵幀準備 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沒有故障的作品的影片。

uj5u.com熱心網友回復：

設定影片的“填充”屬性：

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

標籤：javascript css 动画 svg

上一篇：在JS函式中分配多個不同的值

下一篇：setState不會在使用空陣列的useEffect中的eventListener內更新