更改克隆的svg元素的屬性

我是jQuery的新手，嘗試在克隆SVG元素後更改其屬性，但屬性不會更改。我可以告訴它正在成功複製並追加矩形（由於透明度可以說明），但它並沒有像我期望的那樣將新矩形移動到右側。有誰知道爲什麼這不起作用？更改克隆的svg元素的屬性

<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>

來源

2012-03-20 yasashiku