SVG ellipse
SVG ellipse - <ellipse>
exemple 1
lt; ellipse> est utilisé pour créer une ellipse:
Ovale et ronde très similaire. Sauf que l'ellipse a un rayon différent de x et y, et x et y rayon du cercle est le même:
Voici le code SVG:
Exemples
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
Analyse de code:
- coordonnée x CX attributs centre défini de l'ellipse
- coordonnée y CY attribut définit le centre de l'ellipse
- rayon horizontal définition de l'attribut RX
- rayon vertical définition de l'attribut RY
exemple 2
L'exemple suivant crée trois et entassé sur l'ovale:
Voici le code SVG:
Exemples
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
exemple 3
L'exemple suivant combine deux ellipse (un jaune et un blanc):
Voici le code SVG:
Exemples
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
