js动态修改path值 svg_svg关于animateMotion动态改变path路径来控制svg元素移动

用js动态改变animateMotion的path属性要控制移动的元素只有第一次的时候可以滑动，我用的定时器模拟的后台推过来的数据(用于控制元素移动的坐标)但是只能在第一次的时候可以滑动，然后调试发现path的值也改变了但是就是没有效果，以下是写的demo 请大家指点一下，困扰好长时间了，谢谢。PS:代码看着不清楚的也可以到svgDemo看效果，浏览器中可以看到源码`

id="animateMotion"

xmlns:xlink="http://www.w3.org/1999/xlink"

xlink:href="#circle"

dur="2s"

begin="0s"

fill="freeze"

repeatCount="1">

des = 50;

path=document.createElementNS("http://www.w3.org/2000/svg","path");

path.setAttributeNS(null,"id","motionPath");

path.setAttributeNS(null,"fill","none");

path.setAttributeNS(null,"stroke","red");

path.setAttributeNS(null,"stroke-miterlimit","10");

path.setAttributeNS(null,"d","M 50,50 L 100,100");

document.getElementById("svg").appendChild(path);

setInterval("myInterval()",3000);

function myInterval(){

var x1 = 50+des;

var y1 = 50+des;

var x2 = 100+des;

var y2 = 100+des;

p = "M " +x1+","+y1+" L "+x2+","+y2+"";

document.getElementById("motionPath").setAttribute("d",p);

if(des<401){

if(des==400){

des = 0;

}else{

des = des + 50;

}

}else{

des = 50;

}

]]>

js动态修改path值 svg_svg关于animateMotion动态改变path路径来控制svg元素移动相关推荐

记一次AOP+反射动态修改注解值成功后注解没有生效
记一次AOP+反射动态修改注解值成功后注解没有生效最近重新看了一下反射,突发奇想,在运行的时候在不同的方法上放入不同的注解值,然后获取到注解值进行修改.于是拿了hirbernate的@Validat ...
java动态修改class_Java Agent入门学习之动态修改代码
前言最近用了一下午总算把Java agent给跑通了,本篇文章记录一下具体的操作步骤,以免遗忘.下面话不多说,来一起看看详细的介绍: 通过java agent可以动态修改代码(替换.修改类的定义), ...
tableview动态修改和删除_Ubuntu加载动态库失败的解决方案
在ubuntu下代码编译通过的情况下,经常出现运行时加载动态库出错的情况.这些问题很琐碎,不具备任何技术含量,纯属耽误时间,这也是linux系统的通病,花里胡哨,故弄玄虚. 为了减少初学者在这种无意义 ...
vue 全局动态修改title、keywords、description；vue常用挂载的方法，自定义指令；
vue 全局动态修改title.keywords.description 路由: {path: "xxx",name: "xxx",component: () ...
UEFI-ASL动态修改ACPI表
UEFI-ASL动态修改ACPI表文章目录 UEFI-ASL动态修改ACPI表简述ACPI ACPI是什么? ACPI的组成及使用? ACPI的优点? ACPI的详细功能 ASL语言 ASL基本准 ...
UE4如何动态修改材质（材质参数集）
UE4如何动态修改材质(材质参数集) UE4如何动态修改材质一.Material Parameter collection是什么? 二.使用步骤 1.创建材质参数集 2.创建参数 3.添加到材质 4 ...
Java字节码介绍及动态修改类
前言对于Java字节码,它是在Java类的编译过程产生的,即由.java源文件到.class二进制字节码文件的过程.而Java类的加载又是通过类的名字获取二进制字节流,然后在内存中将字节流生成类对象 ...
C#获取动态代码的值
通过字符串对控件属性赋值例如:"BackColor=Color.FromArgb(100,100,100);BackGroundp_w_picpath=Image.FromFile(\&q ...
Android怎么动态修改vector填充颜色？
android怎么动态修改vector填充颜色? 要动态修改Android中的矢量图形(Vector)填充颜色,可以按照以下步骤: 在您的布局文件中,添加一个 ImageView,并设置其 src 属 ...

js动态修改path值 svg_svg关于animateMotion动态改变path路径来控制svg元素移动

js动态修改path值 svg_svg关于animateMotion动态改变path路径来控制svg元素移动相关推荐

最新文章

热门文章