SVG <reg>

SVG-vorms

SVG het 'n paar voorafbepaalde vormelemente wat deur ontwikkelaars gebruik kan word:

• Reghoek <reg>
• Sirkel <sirkel>
• Ellips <ellips>
• Lyn <lyn>
• Polilyn <polilyn>
• Veelhoek <veelhoek>
• Pad <pad>

Die volgende hoofstukke sal elke element verduidelik, wat begin met die rekt element.

SVG Reghoek - <reg>

Voorbeeld 1

Die <rect>-element word gebruik om 'n reghoek en variasies van 'n reghoekvorm te skep:

Hier is die SVG-kode:

Kode verduideliking:

• Die breedte- en hoogte-kenmerke van die <rect>-element definieer die hoogte en die breedte van die reghoek
• Die styl kenmerk word gebruik om CSS eienskappe vir die reghoek te definieer
• Die CSS vul eienskap definieer die vul kleur van die reghoek
• Die CSS-slagwydte-eienskap definieer die breedte van die grens van die reghoek
• Die CSS stroke eienskap definieer die kleur van die grens van die reghoek

Voorbeeld 2

Kom ons kyk na nog 'n voorbeeld wat 'n paar nuwe eienskappe bevat:

Hier is die SVG-kode:

Kode verduideliking:

• Die x-kenmerk definieer die linkerposisie van die reghoek (bv. x="50" plaas die reghoek 50 px vanaf die linkerkantlyn)
• Die y-kenmerk definieer die boonste posisie van die reghoek (bv. y="20" plaas die reghoek 20 px vanaf die boonste kantlyn)
• Die CSS vul-deursigtigheid-eienskap definieer die ondeursigtigheid van die vulkleur (wettige reeks: 0 tot 1)
• Die CSS beroerte-ondeursigtigheid eienskap definieer die ondeursigtigheid van die beroerte kleur (wettige reeks: 0 tot 1)

Voorbeeld 3

Definieer die ondeursigtigheid vir die hele element:

Hier is die SVG-kode:

Kode verduideliking:

• Die CSS-deursigtigheid-eienskap definieer die ondeursigtigheidswaarde vir die hele element (wettige reeks: 0 tot 1)

Voorbeeld 4

Laaste voorbeeld, skep 'n reghoek met afgeronde hoeke:

Hier is die SVG-kode:

Kode verduideliking:

• Die rx en die ry eienskappe rond die hoeke van die reghoek af