html - Change SVG path with JavaScript

Question

Here is the SVG path:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="sss" viewBox="0 0 500 300">
  <path id="s3" d="M 10,90 Q 100,15 200,70 Z"/>
</svg>

How can I change the d value?

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

Answer 1

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/