SVG <rect>

SVG Forme

SVG are unele elemente de formă predefinite, care pot fi utilizate de către dezvoltatori:

• Dreptunghi <rect>
• Cercul <circle>
• Elipsă <ellipse>
• Linie <line>
• Polyline <polyline>
• Polygon <polygon>
• Cale <path>

Următoarele capitole vor explica fiecare element, începând cu elementul RECT.

SVG dreptunghi - <rect>

Exemplul 1

<rect> Elementul este folosit pentru a crea un dreptunghi și variații ale unui dreptunghi forma:

Aici este codul SVG:

Code explanation:

• Lățimea și înălțimea atributele <rect> elementul definește înălțimea și lățimea dreptunghiului
• style atribut este utilizat pentru a defini proprietățile CSS pentru dreptunghiului
• Proprietatea CSS umplere definește culoarea de umplere a dreptunghiului
• Proprietatea CSS accident vascular cerebral-lățime definește lățimea marginii dreptunghiului
• Proprietatea accident vascular cerebral CSS definește culoarea marginii dreptunghiului

Exemplul 2

Să ne uităm la un alt exemplu care conține unele atribute noi:

Aici este codul SVG:

Code explanation:

• x atribut definește poziția din stânga a dreptunghiului ( de exemplu x = „50“ plasează px dreptunghi de 50 de la marginea din stânga)
• y atribut definește poziția superioară a dreptunghiului ( de exemplu , y = „20“ plasează px dreptunghi 20 din marginea de sus)
• Proprietatea CSS umplere-opacitate definește opacitatea culorii de umplere (legal range: 0 to 1)
• Proprietatea CSS AVC-opacitate definește opacitatea culorii AVC (legal range: 0 to 1)

Exemplul 3

Definiți opacitatea pentru întregul element:

Aici este codul SVG:

Code explanation:

• Proprietatea CSS opacitate definește valoarea opacității pentru întreg elementul (legal range: 0 to 1)

Exemplul 4

Ultimul exemplu, a crea un dreptunghi cu colțuri rotunjite:

Aici este codul SVG:

Code explanation:

• Rx și ry atributele rotunjește colțurile dreptunghiului