为网页上的旋转 SVG 元素设置动画答案

【问题标题】：Animate rotating SVG element on webpage为网页上的旋转 SVG 元素设置动画
【发布时间】：2011-03-01 01:16:27
【问题描述】：

所以我在 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>

【问题讨论】：

标签： javascript html graphics animation svg

【解决方案1】：

在<svg> 元素中添加一个<g> 元素，将所有内容都包含在<svg> 中，并添加<animateTransform type="rotate" attributeName="transform" values="0 cx cy;360 cx cy" dur="30s"/> 作为该<g> 元素的子元素，并将“cx”和“cy”替换为任何内容您要用作旋转中心的实际绝对点，例如“100 300”。应该可以在最新一代的网络浏览器中运行，除了 IE9。
使用 CSS3 2d 变换为旋转设置动画，注意在此过程中必须使用至少三个不同的供应商前缀（-webkit-transform、-moz-transform、-o-transform）。应该可以在最新一代的网络浏览器中运行，但不确定 IE9。
在<svg> 元素中添加一个<g> 元素，将所有内容都包含在<svg> 中，然后在其中添加一个<script>，从window.setInterval 计时器中执行yourGelement.setAttribute("transform", "rotate(" + (newRotation++) + " cx cy)")，如前所述替换cx 和cy 与您的旋转中心。此解决方案应少于 10 行代码，并且即使在不支持声明性 (SMIL) 动画的旧实现（例如 IE9、Firefox2、Safari3）中也应能正常工作。

【讨论】：

好，完整的答案，你比我快！ :-) FF3 现在支持 Smil 动画吗？我还没试过。
我拥有的 firefox 3.7 alpha 至少支持其中的一部分：blog.dholbert.org/2009/10/…。随意根据 w3c svg 测试套件自行测试，dev.w3.org/SVG/profiles/1.1F2/test/harness

【解决方案2】：

有趣的话题，因为 AFAIK 目前 Firefox 不支持 SVG 中的动画。
所以我做了一点调查，找到了一个可行的解决方案。在 Firefox 3.6、带有 Adobe 插件的 IE7、Opera 10.51、Safari 4.0.5、Chrome 5.0 中测试。
SVG 区域的背景在 IE7、Safari 和 Chrome 中没有透明度...我可以尝试使用 object 标签（IE 不支持，可能需要一些条件 HTML...）。

[EDIT] 好的，我改为使用更标准的 object（embed 从未在 HTML 中定义过......）除了 IE，它不是Adobe SVG 插件很好地支持。后者允许添加一个属性以使 embed 对象具有透明度。对于基于 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>

【讨论】：