Appending path child within SVG Using Javascript

Question

Good Day, I am having incredible difficulty in creating a path and displaying it using "appendChild" within an SVG element. I have to be missing something critically simple as I have poured over W3C's specs, w3schools.com, various posts here and trying to ninja google in various ways. I am testing within FireFox and Chrome. I have a simple svg file thus: ``` ``` The script I am attempting to use looks like: ``` newpath = document.createElementNS("SVG","path"); newpath.setAttribute("id", "pathIdD"); newpath.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.793…

Accepted Answer

There are two issues:

As already pointed out, you have to use the full namespace uri, so in this case:

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

Attributes also need to be set with namespace in mind. The good news is that you can pass in `null` as the namespace uri, so:

```
newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");
```

Also, here are two ways to make dealing with the svg namespace easier (assuming that it is a standalone svg, not embedded in HTML):

- To refer to the svg element, instead of giving it an ID, you can use `document.rootElement`.

- `document.rootElement.getAttribute(null, "xmlns")` returns an empty string (while requesting other attributes does work using this method. Instead, use `document.rootElement.namespaceURI`.

So in your code, you could make the following rewrites:

From:

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

To:

```
 newpath = document.createElementNS(document.rootElement.namespaceURI,"path");  
```

And to append the element, you can go from:

```
document.getElementById("fullPageID").appendChild(newpath);
```

to:

```
document.rootElement.appendChild(newpath);
```

So the final script would be:

```
newpath = document.createElementNS(document.rootElement.namespaceURI,"path");  
newpath.setAttributeNS(null, "id", "pathIdD");  
newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
newpath.setAttributeNS(null, "stroke", "black"); 
newpath.setAttributeNS(null, "stroke-width", 3);  
newpath.setAttributeNS(null, "opacity", 1);  
newpath.setAttributeNS(null, "fill", "none");

document.rootElement.appendChild(newpath);
```

Appending path child within SVG Using Javascript

Solution

Problem

Related problems