使用javascript更改svg路径 [英] Change svg path with javascript

问题描述

有SVG路径：

 < svg id =sssviewBox =0 0 500 300version = 1.1 > 
< defs> 
 < / defs> 
  

如何更改d值？

为什么这个 alert（document.getElementById（'s3'）。d）; 给我 undefined ？

解决方案

属性可以以另一种方式设置：

 警报（的document.getElementById（ 'S3'）的getAttribute（ 'd'））; 
  

这似乎有效。设置使用 setAttribute 。

属性和属性之间有区别。属性被设置为像< elem attr ='value'> 并且属性被动态设置。

例如

，输入元素在输入内容时不会改变其属性。然而，财产将会改变。因此， .value 会返回正确的结果，而 .getAttribute（'value'）会返回设置的初始值与 value =something。

在你的情况下，它是一个显式属性而不是属性。因此， .d 在 .getAttribute（'d'）不起作用。

http://jsfiddle.net/Kdp4v/

There is SVG path:

<svg id="sss" viewBox = "0 0 500 300" version = "1.1">
 <defs>
   <path id="s3" d="M 10,90 Q 100,15 200,70 "/>
 </defs>

How can I change the d value?

Why does this alert(document.getElementById('s3').d); give me undefined?

解决方案

Attributes can be set another way:

alert(document.getElementById('s3').getAttribute('d'));

That seems to work. To set use setAttribute.

There is a difference between attributes and properties. Attributes are set like <elem attr='value'> and properties are dynamically set.

For example, an input element will not change its attribute when entering something in it. The property, however, will change. So .value would return the correct result, whereas .getAttribute('value') would return the initial value as set with value="something".

In your case, it's an explicit attribute and not a property. Hence, .d does not work whilst .getAttribute('d') does.

http://jsfiddle.net/Kdp4v/

这篇关于使用javascript更改svg路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！