Laman

Saturday, January 7, 2017

SVG Polygon, Polyline, Path, Text (MG)

Doumo minna ^^! kali ini saya akan bahas 4 bagian SVG sekaligus

SVG Polygon itu element yang membentuk poligon atau bangun datar yang bersiku lebih dari 3
SVG Polyline itu element yang membentuk garis bersiku
SVG Path itu element yang membentuk garis yang bertitik di tiap ujung
SVG text itu untuk mengubah warna, miringnya, tinggi, dll pada tulisan

 ini contoh SVG Polygon:
<!DOCTYPE html>
<html>
<body>

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

ini contoh SVG Polyline:
<!DOCTYPE html>
<html>
<body>

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

ini contoh SVG path:

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

ini contoh text:
<!DOCTYPE html>
<html>
<body>

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

maaf kalau hanya menampilkan contoh.. sebagian besar tinggal ikutin aja..
thx minna!

No comments:

Post a Comment