SVG comment dessiner un cercle avec la balise <circle>
HTML5 cours tutorial SVG
En SVG un Cercle est dessiné à l’aide de l’élément <circle> .
Voici le code SVG :
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx = "100" cy = "100" r = "80" fill = "orange" stroke = "navy" stroke-width = "10"/>
</svg>
</div>
</body>
</html>
Explication de code :
Les attributs cx et cy définissent les coordonnées x et y du centre du
cercle. Si cx et cy sont omis, le centre du cercle sera définie à (0,
0)
L'attribut r définit le rayon du cercle.
Pour le reste des attributs c’est la même chose que pour le rectangle.
Exemple 2
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400">
<circle cx = "100" cy = "100" r = "80" fill = "none" stroke =
"#00f" stroke-width = "10"/>
<circle cx = "280" cy = "100" r = "80" fill = "none" stroke =
"#000" stroke-width = "10"/>
<circle cx = "460" cy = "100" r = "80" fill = "none" stroke =
"#f00" stroke-width = "10"/>
<circle cx = "200" cy = "180" r = "80" fill = "none" stroke =
"yellow" stroke-width = "10"/>
<circle cx = "380" cy = "180" r = "80" fill = "none" stroke =
"green" stroke-width = "10"/>
</svg>
</div>
</body>
</html>
SVG comment dessiner un ellipse avec la balise <ellipse>
L'élément 'ellipse' définit une ellipse qui est aligné sur l'axe avec l' actuel système de coordonnées utilisateur basé sur un point central et deux rayons.
Exemple 1 L'élément <ellipse> est utilisé pour créer une ellipse.
Une ellipse est étroitement liée à un cercle. La différence est qu'une
ellipse a un rayon x et un rayon y qui diffère l’un de l'autre, alors
qu'un cercle a un rayon x et un rayon y qui sont égaux:
Voici le code SVG :
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400"
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>
</div>
</body>
</html>
Explication de code :
L'attribut cx définit le coordonnée x du centre de l'ellipse
L'attribut cy définit le coordonnée y du centre de l'ellipse
L'attribut rx définit le rayon horizontal
L'attribut ry définit le rayon vertical
Exemple 2 L'exemple suivant crée trois ellipses superposées :
Voici le code SVG :
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400">
<ellipse cx="240" cy="70" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="240" cy="80" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="240" cy="90" rx="170" ry="15"
style="fill:yellow"/>
</svg>
</div>
</body>
</html>
Exemple 3 L'exemple suivant combine deux ellipses (un jaune et un blanc) :
Voici le code SVG :
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400">
<ellipse cx="220" cy="50" rx="220" ry="50"
style="fill:yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20"
style="fill:red"/>
</svg>
</div>
</body>
</html>
Exemple 4
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<title> Dessiner un rectangle avec SVG</title>
</head>
<body>
<div>
<svg viewBox="0 0 1200 400">
<ellipse transform="translate(400 200) rotate(-30)"
rx="250" ry="100"
fill="none" stroke="blue" stroke-width="20" />
</svg>
</div>
</body>
</html>
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
