Create SVG element via javascript

Question

I need to create this structure using only javascript:

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#circle"></use>
</svg>

But I have trouble with creating xmlns:xlink attribute. Here is my js code:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
// throws error here
use.setAttributeNS('http://www.w3.org/2000/xmlns', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#circle');
svg.appendChild(use);

If I comment string with settings xmlns:xlink all working good and makes svg same as above, but without xmlns:xlink.

I seen a lot of question similar to mine, but they didn't solve my problem.

@RobertLongson, I guess about this, but how we can set xmlns:xlink attribute? — cassln
– cassln, Commented May 12, 2016 at 8:17
@RobertLongson, wow, you right! Now all working and look fine. Can you format your previous comment as question for sharing you knowledge (it will be more noticeable)? — cassln
– cassln, Commented May 12, 2016 at 8:34

Robert Longson · Accepted Answer · 2016-05-12 08:57:04Z

1

Regarding

use.setAttributeNS('http://www.w3.org/2000/xmlns', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');

You don't need that line and actually it's not valid.

The xmlns:xlink attribute set automatically when you create an element with createElementNS or an attribute with setAttributeNS if you're creating an element/attribute in an XML document and it's not required if you're creating an element in a html document.

answered May 12, 2016 at 8:57

Robert Longson

125k27 gold badges272 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Husni Salax · Accepted Answer · 2016-05-12 08:20:34Z

0

Here we go:

// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");

// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");

// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);

edited May 12, 2016 at 8:20

answered May 12, 2016 at 8:11

Husni Salax

2,0181 gold badge21 silver badges30 bronze badges

1 Comment

cassln Over a year ago

I need to do this without editing HTML. And creating circle I don't need too. Just use.

Collectives™ on Stack Overflow

Create SVG element via javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related