Question

所以我在网页中嵌入了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>

Answer 1

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

Answer 2

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

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

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>

动画在网页上旋转SVG元素

2 个答案: