Question

我目前正在测试不同的选项，以便直接在.svg文件中为SVG文件制作动画。现在，我正在用includet javascript测试动画。问题是，我没有围绕起源工作进行适当的轮换。

我的代码目前看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">


<g>
    <g>
        <path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3
            c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/>
    </g>
    <g>
        <path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38
            c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8
            L27.8,23.1L27.8,23.1z"/>
    </g>
</g>
<g id="loadingRing"> 

        <circle  fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8">

    </circle>
    <script language="JavaScript" type="text/javascript">
var zpos=0;
function turnAround(){
zpos++;
    if(zpos>359)zpos=0;
    var dz=document.getElementById("loadingRing");


    dz.style.transform = "rotate("+zpos+"deg) translate(1%,1%)";

    window.setTimeout("turnAround()", 14);
}
turnAround();
</script>
</g>
</svg>

那么我错过了什么，还是存在更好的解决方案？也许可以在svg文件中包含jquery？

提前致谢

Answer 1

也许你应该坚持使用普通的SVG工具，而不是因为像轮换这样简单的事情而使事情复杂化。

我不清楚你想要旋转什么，所以我让它们都旋转了：

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">

<g>
    <g>
        <path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3
            c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/>
    </g>
    <g>
        <path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38
            c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8
            L27.8,23.1L27.8,23.1z"/>
    </g>
  <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="360 32 32"
                          to="0 32 32"
                          dur="10s"
                          repeatCount="indefinite"/>
</g>
<g id="loadingRing"> 

        <circle  fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8">

    </circle>
  
  <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 32 32"
                          to="360 32 32"
                          dur="5s"
                          repeatCount="indefinite"/>
  
  </g>
</svg>

在这里，一个带脚本的版本，不切实际，但是因为你想要它......

dz.setAttribute("transform", "rotate(" + zpos + " 32 32)");

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">


<g>
    <g>
        <path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3
            c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/>
    </g>
    <g>
        <path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38
            c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8
            L27.8,23.1L27.8,23.1z"/>
    </g>
</g>
<g id="loadingRing"> 

        <circle  fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8">

    </circle>
    <script language="JavaScript" type="text/javascript">
var zpos=0;
function turnAround(){
zpos++;
    //if(zpos>359)zpos=0;
    var dz=document.getElementById("loadingRing");


    //dz.style.transform = "rotate("+zpos+"deg 32 32)";
    dz.setAttribute("transform", "rotate(" + zpos + " 32 32)");

    window.setTimeout("turnAround()", 14);
}
turnAround();
</script>
</g>
</svg>

注意：

我无法改变style属性。不确定原因。
你不需要从359重置为0.无论如何计算模数360。

使用Javascript动画SVG

1 个答案: