如何应用转换到svg路径元素

How to apply transformation to svg path element?

本文关键字：svg 路径 元素 转换 何应用 应用      更新时间：2023-09-26

在我的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>

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元素具有某些属性。看一下适用于rect元素的所有属性，例如http://www.w3.org/TR/SVG/shapes.html#RectElement.

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元素。关于这方面的更多信息，我建议你看看这个页面。

相关文章：