Seminár programovania v sietach


SVG • Android

SVG základné útvary


Vývojári SVG definovali tieto základné útvary:

Skupina

Kontajner na zoskupovanie útvarov.
<g>
.
.
.
</g>

Rotácia v skupine:

<animateTransform attributeType="xml" attributeName="transform"
type="rotate" from="0 150 150" to="360 150 150" dur="10s" repeatCount="indefinite"/>

Základné atribúty útvarov

Aribúty útvarov sa zapisujú ako parametre k jednotlivým tagom základných útvarov. Napríklad: <circle stroke="red" /> Základné atribúty sú:
  • farba pera -> stroke="yellow"
  • farba výplňe -> fill="blue"
  • hrúbka pera -> stroke-width="1"
Ďalšími atribútmi sa nebudeme zaoberať. Vzorkovník farieb si môžte nájsť TU.


Obdĺžnik

<rect x="50" y="20" rx="20" ry="20" width="150" height="100" />
  • x, y -> súradnica ľavého horného okraja obdĺžnika
  • rx, ry -> zaokrúhlenie rohov obdĺžnika v x-ovej a y-ovej osi
  • width, height -> rozmery obdĺžnika

Kružnica

<circle cx="100" cy="50" r="40" />
  • cx, cy -> súradnica stredu kružnice
  • r -> polomer kružnice

Elipsa

<ellipse cx="100" cy="80" rx="100" ry="50" />
  • cx, cy -> súradnica stredu elipsy
  • rx, ry -> polomer elipsy v x-ovej a y-ovej osi

Čiara

<line x1="0" y1="0" x2="200" y2="200" />
  • x1, y1 -> súradnica začiatočného vrchola
  • x2, y2 -> súradnica koncového vrchola

Path

<path d="M150 0 L75 200 L225 200 Z" /> d -> dáta o ceste, aká sa má nakresliť
  • M x, y-> presunúť kresliace pero na súradnicu (move to)
  • L x, y-> nakresliť čiaru k danej súradnici (line to)
  • Z -> uzavrieť cestu