jQuery create empty self-closed tag

Question

I need to create an empty HTML tag which is self-closed, like

<line style="stroke:rgb(0,0,255); stroke-width:2"/>

with the following code:

$("<line/>").css({
    stroke: "rgb(0,0,255)",
    "stroke-width": 2
});

but I always get

<line style="stroke: rgb(0, 0, 255); stroke-width: 2px;"></line>

which doesn't work for SVG.

How I can explicitly cause jQuery to do that?

UPDATED:

Is it really a problem with the closing tag, or is it a problem with `stroke-width: 2px`? AFAIK `` without any contents between the tags should be valid SVG. — BoltClock, Nov 05 '11 at 06:01
Take a look at these: http://stackoverflow.com/questions/2557295/jquery-html-and-self-closing-tags http://stackoverflow.com/questions/1490909/is-it-expected-that-jquery-span-html-turns-xhtml-br-tag-to-html-syntax Hope that helps — 0x6A75616E, Nov 05 '11 at 06:02
It would be helpful for others to point out the exact solution, not only the link to the large page where the solution have to be searched for :/ For me it helped to update `document.createElement('circle')` to `document.createElementNS('http://www.w3.org/2000/svg', 'circle')`. After this update the browser created the self-closed `` and not `` anymore. — Akseli Palén, Jan 23 '13 at 22:52

score 1 · Answer 1 · answered Nov 05 '11 at 06:09

1

The problem is that SVG is XML not HTML so jQuery isn't going to follow the SVG document rules per se.

You could take a look at http://keith-wood.name/svg.html which seems to have a jQuery plugin for SVG.

answered Nov 05 '11 at 06:09

hafichuk

1 Answers1