Question

我想在SVG中绘制2个圆圈并垂直移动它们。一个在向上方向，另一个在向下方向。我怎么能这样做？

Answer 1

试试这个：

<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="10cm" height="10cm"
   viewBox="0 0 1000 1000"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
    <g transform="translate(500,500)">
        <circle id="c" cx="0" cy="0" r="50" fill="red" stroke="red">
            <animate attributeName="cy" from="0" to="-400" start="0s" dur="3s"/>
        </circle>
        <circle id="c" cx="0" cy="0" r="50" fill="green" stroke="green">
            <animate attributeName="cy" from="0" to="400" start="0s" dur="3s"/>
        </circle>
    </g>
</svg>

在SVG中以相反方向移动2个圆圈

1 个答案: