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
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.
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"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With