Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I draw an ellipse as a path in svg?

Tags:

svg

I have to draw the solar system in a svg file, so I have to draw an ellipse in a svg as a path.

Someone could help me?

<!--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>

This create a circle, but I need an ellipse

like image 996
michael Avatar asked Dec 14 '25 05:12

michael


2 Answers

You're getting a circle because the rx and ry values of the elliptical arc are both 75 (they are the two values immediately after the a command). If they were different you'd get an ellipse.

like image 107
Robert Longson Avatar answered Dec 16 '25 22:12

Robert Longson


Here is a solution with simplified code, where the ellipse is draw in a single stroke, as opposed to being draw as two halves.

<path id="venere" fill="none" stroke="white" stroke-width="2"
    d="M 650, 150 a 75,150 0 1,0 1,0"/>
like image 43
blindChicken Avatar answered Dec 16 '25 23:12

blindChicken