Question

我有一个嵌入了svg的html代码：

<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属性会更容易。我不知道是否有任何方法可以这样做（我可以直接使用x更改y和$().attr()等其他属性。顺便说一句，我使用的浏览器是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>

如何改变变换＆＃39;直接在svg中的属性？

1 个答案: