27.4. fejezet: Egyenes, sokszög és törött vonal
A következő létrehozandó alakzat az egyszerű egyenes. A kódja igen egyszerű, mivel meg kell adni a kiinduló koordinátáit (x1,y1), illetve a végső koordinátáit (x2,y2). Persze itt sem tekinthetünk el a színtől és a vonalvastagságtól. Íme a kódrészlet:
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
Hasonló elven lehet sokszöget is készíteni. Az alábbi példában egy háromszöget adunk meg a csúcspontjának koordinátáival:
A teljes kód pedig a következő (htmlpelda73.html):
<html>
<body>
<h1>SVG háromszög</h1>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
</body>
</html>
A legfontosabb a sokszög (polygon) csúcs-koordinátáinak megadása. Az első csúcs a (200,10); a második a (250,190); míg a harmadik a (160,210). Fontos, hogy míg a koordináta-párok közé kell vesszőt tenni, addig az egyes párok után nem szabad.
A következő példában adjunk meg egy ötágú csillagot!
A forráskód pedig a következő: (htmlpelda74.html)
<html>
<body>
<h1>SVG ötszög</h1>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
</body>
</html>
Ha szeretnénk kipróbálni a nem egységes kitöltést, akkor a nonzero paraméter érdemes lecserélni erre: evenodd.
Hasonló elven működik a törött vonal kirajzolása. Itt is meg kell adni a pontok koordinátáit, de a kódrészlet végrehajtásakor az utolsó képpontot nem köti össze a kiindulóval. Íme egy egyszerű lépcső:
És a teljes kódja a következő: (htmlpelda75.html)
<html>
<body>
<h1>SVG lépcsö</h1>
<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" />
</svg>
</body>
</html>
A fejezet leghitelesebb forrásai: https://www.w3schools.com/graphics/svg_line.asp