Question

How can I change a tag name using jquery? I using HTML5 and I am using the svg tag which is built into it. I have a circle tag inside of it.

<svg id="svgelem" height="500" xmlns="http://www.w3.org/2000/svg">
<circle id="shape" cx="600" cy="250" r="250" fill="red"/>
</svg>

I want to use the jquery event “click” to make it than when I click on the body of the page it will check what shape is on the page (ie: the tag name of the tag inside of the svg tag). If its a circle, I’ll erase the circle tag and make a rectangle, if a rectangle, I’ll make a polygon (ie: triangle). But I haven’t found anyone who explained how I can check for this.

Answer 1

Well, if you know it’s going to be one of a limited number of things, you could do something like this:

function handle($el) {
    if ($el.is("circle")
        $el.replaceWith("<rect id='shape'>");
    else if ($el.is("rect")
        $el.replaceWith("<poly id='shape'>");
    // etc...
}

function setHandler() {
    $("#shape").unbind().click(function() {
        handle($(this));
        setHandler();
    }
}
setHandler();

However, you would lose all of the attributes like cx, cy, etc. So those would need to be stored at the beginning of handle and then re-applied to the new element.