Question

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

Answer 1

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。

Answer 2

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

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

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

其中<a>是角度，<x> <y>是选项（x，y）坐标。在您的示例中，如果您要将right_arm旋转90度，则可以执行以下操作：

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

但是，

transform不适用于所有SVG元素。有关这方面的更多信息，我建议您查看this page。

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

2 个答案: