Question

我目前正在制作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：

 <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>或更改begin的值以便在事件上启动动画，但它不起作用。

如果有人有想法......

Answer 1

总结一下我在评论中写的内容......

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

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

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

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

在Jquery事件上启动Svg animateMotion

1 个答案: