Question

我必须在svg文件中绘制太阳系，所以我必须在svg中绘制一个椭圆作为路径。

有人可以帮助我吗？

<!--Venus-->
    <path id="venere" fill="none" stroke="white" stroke-width="2"
        d="
        M 650, 300
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
    />
    <circle cx="100" cy="100" r="10" fill="green">      
        <animateMotion dur="5s" repeatCount="indefinite">
            <mpath xlink:href="#venere"/>
        </animateMotion>
    </circle>

这会创建一个圆圈，但我需要一个椭圆

Answer 1

你得到一个圆圈，因为椭圆弧的rx和ry值都是75（它们是a命令后面的两个值）。如果他们不同，你会得到一个椭圆。

Answer 2

这是一个简化代码的解决方案，其中椭圆在一个笔划中绘制，而不是绘制为两半。

<path id="venere" fill="none" stroke="white" stroke-width="2"
    d="M 650, 150 a 75,150 0 1,0 1,0"/>

Answer 3

在前面的解决方案之外，如果在末尾添加closepath命令z，您将摆脱丢失的像素点。所以应该是：

<path id="venere" fill="none" stroke="white" stroke-width="2"
    d="M 650, 150 a 75,150 0 1,0 1,0 z"/>

如何在svg中绘制椭圆作为路径？

3 个答案: