CODEWITHSUNDEEP
javascriptsvg
Infinite Constructor
Infinite Constructor

Reputation: 521

Appending path child within SVG Using Javascript

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: 

<svg xmlns:svg ... id="fullPageID">
 <image id="timer1" x="100" y="100" width="100px" height="100px" xlink:href="../component/timer/timer1.svg" />  
 <image id="battery1" x="200" y="200" width="100px" height="100px" xlink:href="../component/battery/30x20_ochre.svg" />
 <script xlink:href="pathMaker.js" type="text/javascript" id="pathMaker" />  
</svg>

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.79376,66.16041");  
newpath.setAttribute("stroke", "black");  
newpath.setAttribute("stroke-width", 3);  
newpath.setAttribute("opacity", 1);  
newpath.setAttribute("fill", "none");

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

I just want to make something simple work. Am I wrong to think that I don't require a solution as complicated as the one found at Library to generate SVG Path with Javascript??

Thanks Kindly.

Upvotes: 42

Views: 41665

Answers (3)

Chris Moschini
Chris Moschini

Reputation: 37997

You can get a free namespace and be sneaky by just putting a path element in, using an id to hide it, and then cloning it. Here's an example using jQuery:

HTML

<svg ...>
  <path id="pathFactory"></path>
</svg>

CSS

#pathFactory {
  display: none;
}

Javascript

var path = $('#pathFactory').clone().removeAttr('id');

Your path variable is now a fully working path, with proper namespace, unhidden and ready to be appended to the svg.

Upvotes: 0

Anthony
Anthony

Reputation: 37085

There are two issues:

  1. 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");

  2. 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);

Upvotes: 58

Steve Jorgensen
Steve Jorgensen

Reputation: 12401

The namespace needs to be "http://www.w3.org/2000/svg", not "SVG" in the createElementNS call.

Upvotes: 4

Related Questions