在我的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>
答案 0 :(得分:2)
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。
答案 1 :(得分:0)
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。