在 Jquery 事件上启动 Svg animateMotion答案

【问题标题】：Launch Svg animateMotion on Jquery event在 Jquery 事件上启动 Svg animateMotion
【发布时间】：2016-06-08 05:13:32
【问题描述】：

我目前正在制作 svg 动画。

我有一个 SVG 元素，它遵循带有 animateMotion 属性的路径。

我的形状：

<g id="dart" transform="scale(-1,1) translate(-587, -145)">
    <path d="..." /> 
</g>

我的路：

   <path id="motionPath" fill="none" stroke="none" stroke-miterlimit="10" d="..."/>

我的动画运动：

 <animateMotion xlink:href="#dart" dur="1s" begin="0s" fill="freeze" rotate="auto"><mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#motionPath"></mpath></animateMotion>

完美运行。但是，当页面加载后，它会在 2 秒后开始移动。我想在 JS 事件上启动动画。实际上，我需要在页面中向下滚动以查看 SVG，并且当他可见时动画开始。

JS：

 var pos = $("#dart").offset().top;
    $(window).scroll(function(){
            var scrollTop=$(window).scrollTop();
                if(scrollTop>=pos){
                    /* --- start animation here with injecting --- */
                        var motion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
                        motion.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#dart");
                        motion.setAttributeNS("http://www.w3.org/2000/svg", "dur", "1s");
                        motion.setAttributeNS("http://www.w3.org/2000/svg", "begin", "0s");
                        motion.setAttributeNS("http://www.w3.org/2000/svg", "fill", "freeze");
                        motion.setAttributeNS("http://www.w3.org/2000/svg", "rotate", "auto");

                        var mpath = document.createElementNS("http://www.w3.org/2000/svg","mpath");
                        mpath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#motionPath");
                        motion.appendChild(mpath);
                        document.getElementById("target").appendChild(motion);
               }
    });

我尝试注入（使用 createElementNS）<animateMotion> 或更改开始的值以启动事件动画，但它不起作用。

如果有人有想法...

【问题讨论】：

标签： html svg path jquery-animate

【解决方案1】：

总结一下我最初在cmets中写的内容......

您通常会通过设置其 begin 属性来设置动画动作以在点击时开始，例如begin="dart.click"

jquery 设计用于 html，任何 svg 支持大多是偶然的。因此，当它创建元素时，它会在 html 命名空间而不是 SVG 命名空间中创建它们。因此，第一步是将您的代码转换为使用标准 DOM 方法，例如 document.createElementNS。

如果您确实使用 DOM 创建元素和属性，请注意在正确的命名空间中创建它们。

应在 SVG 命名空间中创建 SVG 元素
大多数属性都在 null 命名空间中，应该通过调用 element.setAttribute 来设置
xlink:href 属性在 xlink 命名空间中，但必须通过调用 element.setAttributeNS 创建，并将 xlink 命名空间作为第一个参数传递。

【讨论】：