block by ThomasG77 454a69b7c4c2da1ddfcd

Exemple SVG

Full Screen

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="//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>