Ģeometriskas figūras

Last modified by superadmin on 2018-01-12 20:39

Ģeometriskas figūras

Taisnstūra zīmēšana

<rect x="10" y="10" width="80" height="40" fill="red"/>

Šeit x un y ir taisnstūra kreisā augšējā stūra koordinātes, width ir platums, height ir augstums. Parametrs fill norāda taisnstūra pildījuma krāsu. Ja figūru vajag apvilkt ar citas krāsas līniju, lieto parametrus stroke un stroke-width - kontūra krāsa un platums.

Piemērs: rect.svg

Parametrus rx un ry lieto kā noapaļojumu rādiusus elipsveida stūru noapaļošanai (ja abi rādiusi ir vienādi, tad vienu no tiem drīkst nerakstīt - noapaļojums ar riņķa līnijas loku.

<rect x="50" y="10" width="250" height="100" rx="10"
        fill="green" />
<rect x="50" y="120" width="250" height="100" rx="50"
        fill="blue" />
<rect x="50" y="230" width="250" height="100" rx="20" ry="50"
        fill="red" />

Piemērs: rect2.svg

Apļa un elipses zīmēšana

<circle cx="50" cy="50" r="20" fill="red" />

Šeit cx un cy ir apļa centra koordinātes, r ir riņķa līnijas rādiuss.

Piemērs: circle.svg

<ellipse cx="50" cy="50" rx="30" ry="20" fill="red" />

Šeit cx un cy ir elipses centra koordinātes, rx ir elipses rādiuss pa x asi, ry ir elipses rādiuss pa y asi. Parametri fill, stroke un stroke-width izmantojami tāpat kā zīmējot taisnstūrus.

Nogriežņu, daudzstūru un lauztu līniju zīmēšana

<line x1="30" y1="30" x2="250" y2="300" stroke="red" stroke-width="2"/>

Šeit x1,y1 ir sākumpunkta koordinātes, bet x2,y2 beigu punkta koordinātes, parametri stroke un stroke-width apraksta līnijas krāsu un platumu.

<line x1="300" y1="40" x2="30" y2="330" stroke="blue" stroke-width="5"/>
<line x1="30" y1="100" x2="300" y2="100" />

Piemērs: line.svg

Lauztas līnijas veido ar polygon elementu:

<polygon points="10,10 100,50 100,200 10,160" fill="yellow" stroke="red" 
stroke-width="2"/>

Šeit skaitļu pārīši (10,10 100,50 …) ir daudzstūra virsotņu koordinātes. Daudzstūrim nav jābūt izliektam (tā malas drīkst pat sevi krustot), t.i. var uzzīmēt arī zvaigznīti utml. daudzstūrus.

<polygon points="170,100 210,10 250,100 150,45 270,45" fill="none" stroke="red" 
stroke-width="2"/>
<polygon points="170,300 210,210 250,300 150,245 270,245" fill="green" stroke="green" 
stroke-width="2"/>

Piemērs: polygon.svg

Nenoslēgtas lauztas līnijas ļoti līdzīgi var veidot ar polyline elementu:

<polyline fill="none" stroke="blue" stroke-width="10" 
points="5,5 45,5 45,45 85,45, 85,5 125,5 125,85 165,85 165,5 205,5 205,125 245,125 
        245,5 285,5 285,165 325,165 325,5 365,5 365,205" />

Piemērs: polyline.svg

Tags:
Created by Kalvis Apsītis on 2008-05-01 18:07
    
This wiki is licensed under a Creative Commons 2.0 license
XWiki Enterprise 6.4 - Documentation