CODEWITHSUNDEEP
jquerysvg
accidental_PhD
accidental_PhD

Reputation: 787

Changing attributes of cloned svg element

I'm new to jQuery and trying to change an attribute of an SVG element after cloning it, but the attributes won't change. I can tell it's successfully duplicating and appending the rectangle (you can tell because of the transparency), but it's not moving the new rectangle to the right as I'd expect. Does anyone know why this isn't working?

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("rect#current").clone().attr("x","10").appendTo($("svg"));
            });
        });
    </script>
</head>
<body>
    <svg width="100" height="20">
        <rect y="0" x="0" height="10" width="10" id="current"
              style="fill:#000000;fill-opacity:0.1;stroke:#000000;stroke-width:1;stroke-opacity:0.5;"/>
    </svg><br/>
    <button>Clone</button><br>
</body>
</html>

Upvotes: 1

Views: 2275

Answers (1)

Jeff B
Jeff B

Reputation: 30099

Seems to work here:

http://jsfiddle.net/jtbowden/BzJtU/

Is there something else going on? I would also mention that you need to change the id after you clone the element, or else you end up with two elements with the same id, which is not valid XML.

Here is a fiddle where I clone the rectangle, move it over 10, and make the clone the new #current element:

http://jsfiddle.net/jtbowden/BzJtU/2/

Upvotes: 4

Related Questions