动画在网页旋转SVG元素 [英] Animate rotating SVG element on webpage
问题描述
所以我有嵌入网页Inkscape创作SVG文件，我想它慢慢旋转。我已经使用JavaScript和直接插入动画命令到SVG试过，但没有任何工程。我不想加载整个JS库为这一个任务。这是我到目前为止有：
＆LT; HTML和GT;
＆LT;车身的bgcolor =＃333333＆GT;
＆LT;嵌入SRC =gear.svgID =齿轮WIDTH =1000HEIGHT =1000的风格=的位置是：绝对的;顶部：-500px;左：-500px; /＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR齿轮=的document.getElementById（齿轮）;
window.setInterval（函数（）{
//不知何故动画齿轮。
}，10）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
有趣的话题，因为据我所知目前Firefox不支持动画SVG。结果
所以我做了一个小调查，发现了工作方案。经测试，在Firefox 3.6中，IE7与Adobe插件，歌剧10.51，Safari浏览器4.0.5，Chrome浏览器5.0。结果
在SVG区域的背景在IE7，Safari和Chrome没有透明度...我可能会用的对象的标签（不支持IE，可能需要一些有条件的HTML ...）。
好吧，我改为使用更标准的对象的（嵌入的从未在HTML ...定义），除了IE浏览器在那里是不由Adobe SVG插件很好的支持。后者允许添加属性具有的嵌入的对象的透明度。对于基于WebKit的浏览器，不透明度：看到嵌入在HTML 对象：默认的背景应该是透明的错误。
该HTML code：
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // EN
http://www.w3.org/TR/html4/strict.dtd\">
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;标题＆GT;动画效果SVG＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;车身的bgcolor =＃CCAAFF的onload =RotateSVG（）＆GT;
＆LT;！ - [！如果IE＆GT; - ＆GT;
＆LT;对象ID =齿轮数据=gear.svgTYPE =图像/ SVG + XML
WIDTH =500HEIGHT =500
风格=的位置是：绝对的;顶部：-250px;左：-250px;＆GT;
＆LT;！ - ＆LT;！[ENDIF] - ＆GT;
＆LT;嵌入ID =齿轮SRC =gear.svgTYPE =图像/ SVG + XML
WIDTH =500HEIGHT =500的wmode =透明
风格=的位置是：绝对的;顶部：-250px;左：-250px;/＆GT;
＆LT;！ - [！如果IE＆GT; - ＆GT;
＆LT; /对象＆gt;
＆LT;！ - ＆LT;！[ENDIF] - ＆GT; ＆LT; DIV的onclick =RotateSVG（）
风格=的位置是：绝对的;顶部：250像素;背景色：#ACF;＆GT;启动/停止和LT; / P＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
VAR动画;
VAR角= 0;
功能RotateSVG（）
{
如果（动画！= NULL）
{
// 停下来
clearInterval（动画）;
动画= NULL;
返回;
} VAR svgTag =的document.getElementById（齿轮）;
VAR svgDoc = NULL;
尝试
{
//大多数现代浏览器明白这一点
svgDoc = svgTag.getSVGDocument（）;
}
赶上（前）{} //忽略错误
如果（svgDoc ==未定义）
{
svgDoc = svgTag.contentDocument; //对于Mozilla的老？
如果（svgDoc ==未定义）
{
警报（无法获取SVG文档）;
返回;
}
} 变种齿轮= svgDoc.getElementById（gearG）;
如果（齿轮== NULL）
{
警报（找不到gearG集团）;
返回;
} 动画=的setInterval（
功能（）
{
角+ = 5;
gear.setAttribute（改造，旋转（+角度+250 250））;
}，100）;
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
在SVG code我用（只有ID为重要的是，SVG是 Mozilla的SVG项目 ）：
＆LT; SVG的xmlns =http://www.w3.org/2000/svg
的xmlns：XLink的=http://www.w3.org/1999/xlink
版本=1.1
baseProfile =全＆GT;
＆所述;！ - http://www.mozilla.org/projects/svg/ - ＆GT;
＆LT克ID =gearG填充不透明度=0.7行程=黑笔画宽度=0.1厘米＆GT;
＆LT;圈CX =6厘米CY =2厘米R =100补=红
变换=翻译（0.50）/＆GT;
＆LT;圈CX =6厘米CY =2厘米R =100补=蓝
变换=翻译（70150）/＆GT;
＆LT;圈CX =6厘米CY =2厘米R =100补=绿色
变换=翻译（-70,150）/＆GT;
＆所述; / g取代;
＆LT; / SVG＆GT;
So I have an SVG file created in Inkscape embedded in a webpage, and I'd like it to rotate slowly. I've tried using Javascript and inserting animation commands directly into the SVG, but nothing works. I don't want to load in an entire JS library for this one task. 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>
Interesting topic because AFAIK currently Firefox doesn't support animation in 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.
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...).
[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. 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.
The HTML code:
<!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 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>
这篇关于动画在网页旋转SVG元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
