svgの 'transform'属性を直接変更するにはどうすればいいですか？

Question

私はこのように埋め込まれたSVGとHTMLコードがあります。JavaScriptで

<svg id="mysvg" ... 
    <rect id="myrect" x="10" y="10" width="90" height="90" ... /> 
    ... 
</svg> 

を、私は長方形の回転をしたいので、私は（jQueryを使って）みました：

$("#myrect").attr("transform", "rotate(45, 50, 50)"); 

が、それは動作しません。 htmlコードでは、transformという属性が四角形に追加されています。私はElement.setAttributeNS()機能を試しましたが、どちらも機能しません。

は、いくつかの研究の後、私は次のようなアプローチが動作を学んだ：

var r = $("#mysvg").get(0).createSVGTransform(); 
var t = $("#myrect").get(0); 
t.transform.baseVal.appendItem(r); 
r.setRotate(45, 50, 50); 

それは動作しますが、私が直接transform属性を変更することができれば、それははるかに容易になります。これを行う方法があるかどうかわかりません（$().attr()を使用してxとyなどの他の属性を直接変更できます）。ところで、私が使用しているブラウザはChromeです。

Answer 1

のattrを使用して変換変更

はあなたが見ることができますあなたのコードのより多くを持っている...、ここで働いているようですか？

$('#myrect').attr('transform', 'rotate(10)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="mysvg"> 
 
    <rect id="myrect" x="10" y="10" width="90" height="90"/> 
 
</svg>