Question

我是使用SVG的新手，我试图创建3个从屏幕中心开始依次循环的圆圈。我的问题是，当循环发生时，由于第一个圆圈在其上方绘制了一些东西，因此它被隐藏在其他圆圈的后面。

以下是现有代码：

AssertionError: 2 == 3

按原样，它会正确设置动画一次，然后最后一个圆每隔几秒钟重新绘制一次，因为其他动画被隐藏了。我希望它可以在每个循环的顶部中继圆圈。由于SVG不支持图层，在我看来，再次出现第一个圆圈的最简单方法是将其重新绘制在顶部，但我不确定如何做到这一点，并且很难弄清楚。任何帮助将不胜感激。

Answer 1

也许只是删除fill =" freeze "

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="470px" height="250px" 
     preserveAspectRatio="xMidYMid">

    <g transform-origin="center" transform="scale(1,1)">
       <g transform-origin = "center" transform="scale(0,0)">
           <animateTransform id = "anim1" attributeName="transform" type="scale"
               from="0,0" to="1,1"
               begin="0s; anim3.end" dur="2.5s" />
           <circle cx="235" cy="125" r="275" fill="red"/>
       </g>
       <g transform-origin="center" transform="scale(0,0)">
            <animateTransform id = "anim2" attributeName="transform" type="scale"
                from="0,0" to="1,1"
                begin="anim1.end" dur="2.5s" />
            <circle cx="235" cy="125" r="275" fill="blue"/>
        </g>
        <g transform-origin="center" transform="scale(0,0)">
            <animateTransform id = "anim3" attributeName="transform" type="scale"
                from="0,0" to="1,1"
                begin="anim2.end" dur="2.5s" />
            <circle cx="235" cy="125" r="275" fill="green"/>
        </g>
    </g>
</svg>

Answer 2

我正在使用@Alexandr_T答案，并添加了一个背景<rect>，该背景会随着<set>的变化而变色。我希望这就是您想要的效果。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="470" height="250" 
     preserveAspectRatio="xMidYMid">
  
  <rect width="470" height="250" fill="green" >
     <set begin="anim1.begin" attributeType="CSS" attributeName="fill" to="green"></set>
     <set begin="anim2.begin" attributeType="CSS" attributeName="fill" to="red"></set>
     <set begin="anim3.begin" attributeType="CSS" attributeName="fill" to="blue"></set>
  </rect>

    <g transform-origin="center" transform="scale(1,1)">
       <g transform-origin = "center" transform="scale(0,0)">
           <animateTransform id = "anim1" attributeName="transform" type="scale"
               from="0,0" to="1,1"
               begin="0s; anim3.end" dur="2.5s" />
           <circle cx="235" cy="125" r="275" fill="red"/>
       </g>
       <g transform-origin="center" transform="scale(0,0)">
            <animateTransform id = "anim2" attributeName="transform" type="scale"
                from="0,0" to="1,1"
                begin="anim1.end" dur="2.5s" />
            <circle cx="235" cy="125" r="275" fill="blue"/>
        </g>
        <g transform-origin="center" transform="scale(0,0)">
            <animateTransform id = "anim3" attributeName="transform" type="scale"
                from="0,0" to="1,1"
                begin="anim2.end" dur="2.5s" />
            <circle cx="235" cy="125" r="275" fill="green"/>
        </g>
    </g>
</svg>

如何在SVG循环中为动画重新绘制对象？

2 个答案: