logo标签列表

如何将变换应用于SVG路径元素？

javascriptsvg
3
在我的 HTML 文件中，我加载了一个 SVG 图像并选择其中的一个路径元素。现在我想将其旋转，但我不知道如何操作。下面的代码无法实现旋转。
有人知道如何做吗？
谢谢
<!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>
2个回答
3

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

你需要直接在SVG元素上设置transform属性。 rotate方法需要一个必需的参数，即您要旋转元素的角度数。
right_arm.setAttribute('transform','rotate(45)');

你需要在JavaScript中使用`.setAttribute(...)`方法，因为如果你直接在HTML中这样做，你实际上会直接指定属性给DOM元素本身：
<rect transform="rotate(45)" ... />

http://www.w3.org/TR/SVG/coords.html#TransformAttribute

重要的是要注意，根据SVG规范，您只允许为SVG元素设置某些属性。例如，查看适用于
0

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

对于此任务，您可以在right_arm元素上使用transform属性，并指定旋转。语法如下：

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

其中 <a> 代表角度，<x> <y> 是一个选项 (x,y) 坐标。在你的例子中，如果你想将 right_arm 顺时针旋转90度，你可以这样做：

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

transform 并不适用于所有的 SVG 元素。如果您想了解更多信息，请参考 this page。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接