Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Created June 7, 2015 22:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/454a69b7c4c2da1ddfcd to your computer and use it in GitHub Desktop.
Save ThomasG77/454a69b7c4c2da1ddfcd to your computer and use it in GitHub Desktop.
Download ZIP
Exemple SVG
Raw
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple SVG</title>
<style></style>
<script></script>
</head>
<body>
<svg height="600" width="800">
<!-- Rectangle -->
<rect x="200" y="100" width="60" height="30" fill="red" stroke="green" stroke-width="2" />
<rect x="200" y="200" width="50" height="130" style="fill:blue;stroke:yellow;stroke-width:2;" />
<!-- Cercle -->
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="0.5" fill="#F89C43" />
<!-- Groupe avec cercle et ellipse -->
<g stroke-width="6px" stroke="grey">
<circle r="30" cx="100" cy="100" fill="cyan" fill-opacity="1"></circle>
<ellipse rx="150" ry="100" cx="350" cy="150" fill="brown" fill-opacity="0.5"></ellipse>
</g>
<!-- Ligne et polyligne -->
<line x1="100" y1="350" x2="150" y2="500" stroke="green" stroke-linecap="round"></line>
<polyline points="20,450, 100,300, 400,300, 300,650" fill="none" stroke="red" stroke-linecap="round"></polyline>
<!-- Polygon -->
<polygon xmlns="http://www.w3.org/2000/svg" points="299,250,343,325,256,324,299,250"/>
<!-- Path = forme arbitraire -->
<path fill="pink" d="M 400 350 L 750 350 250 450 z"/>
<!-- Text -->
<text x="100" y="550">Mon texte est là</text>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment