动画在网页上旋转SVG元素

Question

动画在网页上旋转SVG元素

Zar*_*nen 6 html javascript graphics animation 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Eri*_*röm 8

在<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定时器的元素,就像将cx和cy替换为旋转中心一样.此解决方案应少于10行代码,即使在不支持声明(SMIL)动画的旧实现(例如IE9,Firefox2,Safari3)中也应该可以正常工作.

Answer 2

Phi*_*Lho 8

有趣的话题是因为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的浏览器,没有透明度:请参阅HTML中嵌入的对象:默认背景应该是透明的 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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，8 月前
查看次数：	14431 次
最近记录：	13 年，2 月前