如何直接更改svg中的'transform'屬性？

我有SVG的HTML代碼嵌入這樣的：如何直接更改svg中的'transform'屬性？

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

在Javascript中，我想矩形旋轉，所以我嘗試（使用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。

來源

2016-11-21 Xiaojun Chen

@CBroe你試過'.prop'自己嗎？我得到了'不能分配給控制檯中的只讀屬性'變換'對象'錯誤。 –

更改變換使用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>

來源

2016-11-21 21:19:52 Keith

是的，如果我在Chrome控制檯中嘗試了代碼，它適用於我，但如果我將它寫入js文件並加載它，則不適用。 –

我也試過它在FireFox和Edge上，無論是在控制檯還是js文件中，它們都能正常工作。所以這似乎是鉻問題，但我無法證實這一點。 –

我正在使用Chrome，上面的代碼片段正在爲我工作。也許你有一些導致問題的Chrome擴展？或者也許Chrome版本？你還在做DOM準備.. – Keith

如何直接更改svg中的'transform'屬性？

回答

相關問題