Question

我试图使用jQuery更新对象的转换，正常div正在更新但SVG没有更新。这是我的代码：

SVG：

<svg>
    <polygon id="poly" transform="rotate(0 180 180)">
</svg>

HTML Div：

<div id="speed-number">0</div>

jQuery的：

$.getJSON("file.json", function(result){
    var realtime = result.realtime;
    var rt_angle = realtime/1200*100;
    var needle = rt_angle/100*270;
    $("#poly").css("transform", "rotate("+needle+" 180 180)");
    $('#speed-number').text(realtime);
});

HTML Div已成功更新，但SVG多边形未获得更新。我做错了什么？

Answer 1

您的<polygon>具有transform属性。但是您正在调用jQuery的css()函数，该函数设置style属性。

您需要：

调用更改属性的函数。例如。 attr()

＆＃13;

var realtime = 600;
var rt_angle = realtime/1200*100;
var needle = rt_angle/100*270;
$("#poly").attr("transform", "rotate("+needle+" 180 180)");
$('#speed-number').text(realtime);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="360" height="200">
    <polygon id="poly" points="180,175, 180,185, 10,180" transform="rotate(0 180 180)"/>
</svg>

<div id="speed-number">0</div>

＆＃13;

或者您可以继续使用css()，但您需要进行一些更改：
- 您需要在CSS值中添加单位，因为CSS中需要单位。
- rotate()的CSS版本不支持transform的三个参数版本。您需要使用transform-origin来指定轮播中心。

＆＃13;

var realtime = 600;
var rt_angle = realtime/1200*100;
var needle = rt_angle/100*270;
$("#poly").css({"transform": "rotate("+needle+"deg)",
                "transform-origin": "180px 180px"});
$('#speed-number').text(realtime);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="360" height="200">
    <polygon id="poly" points="180,175, 180,185, 10,180" transform="rotate(0 180 180)"/>
</svg>

<div id="speed-number">0</div>

＆＃13;

使用jQuery更新SVG中的转换

1 个答案: