动画在网页上旋转SVG元素
[英]Animate rotating SVG element on webpage
问题描述
So I have an SVG file created in Inkscape embedded in a webpage, and I'd like it to rotate slowly. 
所以我在网页中嵌入了Inkscape创建的SVG文件，我希望它能慢慢旋转。 I've tried using Javascript and inserting animation commands directly into the SVG, but nothing works. 我尝试过使用Javascript并直接将动画命令插入SVG，但没有任何作用。 I don't want to load in an entire JS library for this one task. 我不想为这一项任务加载整个JS库。 This is what I have so far: 这是我到目前为止：
<html>
<body bgcolor="#333333">
<embed src="gear.svg" id="gear" width="1000" height="1000" style="position: absolute; top: -500px; left: -500px;" />
<script type="text/javascript">
var gear = document.getElementById("gear");
window.setInterval(function() {
// Somehow animate the gear.
}, 10);
</script>
</body>
</html>
2 个解决方案
解决方案1
8 2010-06-08 09:26:26
- Add a
<g>element inside your<svg>element that wraps everything inside the<svg>, and add<animateTransform type="rotate" attributeName="transform" values="0 cx cy;360 cx cy" dur="30s"/>as a child of that<g>element, and replace "cx" and "cy" with whatever actual absolute point you want to use as the center of rotation, eg "100 300".在<svg>元素中添加<g>元素，包含<svg>内的所有内容，并添加<animateTransform type="rotate" attributeName="transform" values="0 cx cy;360 cx cy" dur="30s"/>作为<g>元素的子元素，并将”cx“和”cy“替换为您想要用作旋转中心的任何实际绝对点，例如”100 300“。 Should work in the newest generation of web browsers, apart from IE9.应该在最新一代的Web浏览器中工作，除了IE9。 - Animate the rotatation using CSS3 2d transforms, noting that you'll have to use at least three different vendor prefixes in the process (-webkit-transform, -moz-transform, -o-transform). 使用CSS3 2d变换为旋转设置动画，注意到您必须在过程中使用至少三个不同的供应商前缀（-webkit-transform，-moz-transform，-o-transform）。 Should work in the newest generation of web browsers, unsure about IE9 though. 应该在最新一代的Web浏览器中工作，但不确定IE9。
- Add a
<g>element inside your<svg>element that wraps everything inside the<svg>and then add a<script>inside it that doesyourGelement.setAttribute("transform", "rotate(" + (newRotation++) + " cx cy)")from awindow.setIntervaltimer, as before replace the cx and cy with your center of rotation.添加<g>元素的内部<svg>一个包装里面的一切元素<svg>然后添加<script>里面，做yourGelement.setAttribute("transform", "rotate(" + (newRotation++) + " cx cy)")来自window.setInterval计时器，就像之前用你的旋转中心替换cx和cy一样。 This solution should be less than 10 lines of code, and should work fine even in older implementations that don't support declarative (SMIL) animations (eg IE9, Firefox2, Safari3).此解决方案应少于10行代码，即使在不支持声明（SMIL）动画的旧实现（例如IE9，Firefox2，Safari3）中也应该可以正常工作。
解决方案2
8 已采纳 2010-06-08 12:23:12
Interesting topic because AFAIK currently Firefox doesn't support animation in SVG. 有趣的话题，因为AFAIK目前Firefox不支持SVG中的动画。
So I made a little investigation and found a working solution. 所以我做了一些调查，找到了一个有效的解决方案。 Tested in Firefox 3.6, IE7 with Adobe plug-in, Opera 10.51, Safari 4.0.5, Chrome 5.0. 在Firefox 3.6，IE7与Adobe插件，Opera 10.51，Safari 4.0.5，Chrome 5.0中进行了测试。
The background of the SVG area has no transparency in IE7, Safari and Chrome... I might try with the object tag (not supported by IE, probably need some conditional HTML...). SVG区域的背景在IE7，Safari和Chrome中没有透明度......我可能尝试使用对象标签（IE不支持，可能需要一些条件HTML ...）。
[EDIT] OK, I changed to use the more standard object ( embed have never been defined in HTML...) except for IE where it isn't well supported by Adobe SVG plugin. [编辑]好的，我更改为使用更标准的对象 （ 嵌入从未在HTML中定义...），除了IE，它没有得到Adobe SVG插件的良好支持。 The latter allows to add an attribute to have transparency of the embed object. 后者允许添加属性以使嵌入对象具有透明度。 For Webkit-based browsers, no transparency: see object embedded in HTML: default background should be transparent bug. 对于基于Webkit的浏览器，没有透明度：请参阅HTML中嵌入的对象：默认背景应该是透明的 bug。
The HTML code: HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Animating SVG</title>
</head>
<body bgcolor="#CCAAFF" onload="RotateSVG()">
<!--[if !IE]> -->
<object id="gear" data="gear.svg" type="image/svg+xml"
width="500" height="500"
style="position: absolute; top: -250px; left: -250px;">
<!--<![endif]-->
<embed id="gear" src="gear.svg" type="image/svg+xml"
width="500" height="500" wmode="transparent"
style="position: absolute; top: -250px; left: -250px;"/>
<!--[if !IE]> -->
</object>
<!--<![endif]-->
<div onclick="RotateSVG()"
style="position: absolute; top: 250px; background-color: #ACF;">Start / Stop</p>
<script type="text/javascript">
var animator;
var angle = 0;
function RotateSVG()
{
if (animator != null)
{
// Just stop
clearInterval(animator);
animator = null;
return;
}
var svgTag = document.getElementById("gear");
var svgDoc = null;
try
{
// Most modern browsers understand this
svgDoc = svgTag.getSVGDocument();
}
catch (ex) {} // Ignore error
if (svgDoc == undefined)
{
svgDoc = svgTag.contentDocument; // For old Mozilla?
if (svgDoc == undefined)
{
alert("Cannot get SVG document");
return;
}
}
var gear = svgDoc.getElementById("gearG");
if (gear == null)
{
alert("Cannot find gearG group");
return;
}
animator = setInterval(
function ()
{
angle += 5;
gear.setAttribute("transform", "rotate(" + angle + " 250 250)");
}, 100);
}
</script>
</body>
</html>
The SVG code I used (only the ID is important, the SVG is from Mozilla SVG Project ): 我使用的SVG代码（只有ID很重要，SVG来自Mozilla SVG Project ）：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
baseProfile="full">
<!-- http://www.mozilla.org/projects/svg/ -->
<g id="gearG" fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<circle cx="6cm" cy="2cm" r="100" fill="red"
transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" fill="blue"
transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" fill="green"
transform="translate(-70,150)" />
</g>
</svg>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.