Javascript 如何将转换应用于svg路径元素？_Javascript_Svg

Javascript 如何将转换应用于svg路径元素？

javascript svg

Javascript 如何将转换应用于svg路径元素？,javascript,svg,Javascript,Svg,在我的html文件中，我加载一个svg图像并选择其中一个path元素。现在我想旋转它，但我不知道如何旋转。下面的代码不起作用有人知道怎么做吗谢谢 <!DOCTYPE html> <html> <head> <title>Animate</title> <style> </style> <script src="../js/plugi

在我的html文件中，我加载一个svg图像并选择其中一个path元素。现在我想旋转它，但我不知道如何旋转。下面的代码不起作用

有人知道怎么做吗

谢谢

<!DOCTYPE html>
<html>
    <head>
        <title>Animate</title>
        <style>
        </style>
        <script src="../js/plugin/jquery-2.1.4.min.js"></script>
    </head>
    <body>

        <object data="images/steve/steve.svg" type="image/svg+xml" id="steve" width="100%" height="100%"></object>

        <script>
            var steve = document.getElementById("steve");

            steve.addEventListener("load", function() {


                var svgDoc = steve.contentDocument; 
                var right_arm = svgDoc.getElementById("right_arm"); 



                //right_arm.rotate(90);    // THIS DOES NOT WORK


            },false);

        </script>
    </body>

</html>


使有生气
var steve=document.getElementById（“steve”）；
steve.addEventListener（“加载”，函数（）{
var svgDoc=steve.contentDocument；
var right_arm=svgDoc.getElementById（“right_arm”）；
//右臂。旋转（90）；//这不起作用
}，假）；

必须直接在SVG元素上设置

transform

属性。

rotate

方法接受一个必需的参数，该参数是要旋转元素的度数

right_arm.setAttribute('transform','rotate(45)');

您必须在javascript中使用

.setAttribute（…）

方法，因为如果要在HTML中直接执行此操作，您将直接为DOM元素本身指定属性：

<rect transform="rotate(45)" ... />

需要注意的是，根据SVG规范，只允许将某些属性添加到SVG元素中。例如，看看适用于rect元素的所有属性。

SVG元素不像普通HTML元素那样共享所有CSS和JavaScript功能。有些CSS属性在SVG元素上的工作方式不同，有些则根本不起作用

对于此任务，您可以使用

right\u arm

元素上的

transform

属性，并指定旋转。语法如下所示：

rotate(<a> [<x> <y>])

然而，

transform

并不能在所有SVG元素上工作。有关这方面的更多信息，我建议查看

right_arm.setAttribute("transform", "rotate(90)");