javascript – 在网页上动画旋转SVG元素

所以我在网页中嵌入了Inkscape创建的SVG文件,我希望它能慢慢旋转.我尝试过使用 Javascript并直接将动画命令插入SVG,但没有任何作用.我不想为这一项任务加载整个JS库.这是我到目前为止：

<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>

解决方法

有趣的话题是因为AFAIK目前Firefox不支持SVG中的动画.
所以我做了一些调查,找到了一个有效的解决方案.在Firefox 3.6,IE7与Adobe插件,Opera 10.51,Safari 4.0.5,Chrome 5.0中进行了测试.
SVG区域的背景在IE7,Safari和Chrome中没有透明度……我可能尝试使用对象标签(IE不支持,可能需要一些条件HTML …).

[编辑]好的,我更改为使用更标准的对象(嵌入从未在HTML中定义…),除了IE,它没有得到Adobe SVG插件的良好支持.后者允许添加属性以使嵌入对象具有透明度.对于基于Webkit的浏览器,没有透明度：请参阅object embedded in HTML: default background should be transparent 错误.

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>

我使用的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>

javascript – 在网页上动画旋转SVG元素

解决方法

猜你在找的JavaScript相关文章