Element HTML SVG

L’element <svg> és un container per gràfics SVG i té diferents mètodes per dibuixar  camins, caixes, cercles, text i imatges gràfiques.

Exemple de cercle amb SVG:

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Explicació del codi SVG:

  • Una imatge comença amb un element <svg>.
  • Els atributs width i height de l’element <svg> defineixen l’amplada i l’alçada de la imatge SVG.
  • <circle> s’utilitza per dibuixar un cercle.
  • Els atributs cx i cy defineixen les coordenades x i y del centre del cercle. Si cx i cy són omesos, el centre del cercle es posa per defecte a (0,0).
  • L’atribut r defineix el radi del cercle.
  • Els atributs stroke i stroke-width defineixen com serà la línia de fora, definint el color i l’amplada amb px.
  • L’atribut “fill” fa referència al color interior del cercle.

Exemples d’elements SVG:

Rectangle <rect>

Captura de pantalla_1

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Amb cantó arrodonit:

Captura de pantalla_2

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

 

Polígon <polygon>

El <polygon> s’utilitza per crear gràfics que tinguin com a mínim tres costats.

Els polígons estan fets a partir de línies rectes i la forma que fan és tancada (totes les línies estan en contacte amb alguna altra, de manera que tanquen la figura).

Captura de pantalla 2015-03-09 a las 15.20.53

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

 

 

Path <path>

L’element <path> s’utilitza per definir “camins”.

Per crear un <path> es poden utilitzar les següents comandes:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

Nota: totes les comandes es poden expressar també amb lletres minúscules. Les majúscules fan referència a posicions absolutes, mentre que les minúscules són posicions relatives.

Captura de pantalla 2015-03-09 a las 15.27.41

 

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

 

Per més exemples i funcions clicar aquí .

Leave a Reply

Your email address will not be published.