- linie
Este ușor să desenați o linie dreaptă simplă. Indicăm coordonatele a două puncte și se va trasa o linie între ele.
Pentru a desena o linie, utilizați eticheta de linie. Valorile atributelor x1 și y1 stabilesc coordonatele de la începutul liniei și valorile x2 și y2 determină sfârșitul liniei.
Asigurați-vă că specificați atributul width-stroke. altfel linia va fi invizibilă.
- Multe linii
Se utilizează o etichetă polilinică pentru a desena mai multe linii. care definește un set de segmente conectate dintr-o linie dreaptă, care, ca rezultat, dă, de regulă, o figură neînchipuită (ale cărei puncte de început și de sfârșit nu sunt conectate).
Valorile în puncte determină poziția figurii de-a lungul axelor x și y de la începutul până la sfârșitul cifrei și sunt împărțite în perechi (x, y) în întreaga listă de valori. Un număr impar de puncte este o eroare.
Pentru a defini o linie utilizând eticheta poliliniei. specificăm un set de puncte. Primul punct este compensat cu 0 pixeli la dreapta și cu 40 de pixeli în jos. Apoi, linia se deplasează la un punct de 30 de pixeli spre dreapta și la 0 pixeli în jos față de origine; astfel încât primul segment este creat. Următorul punct este deplasat cu 60 de pixeli la dreapta și cu 40 de pixeli în jos, iar ultimul punct este de 285 de pixeli la dreapta și 40 de pixeli în jos. Atributul de stil specifică grosimea și culoarea liniei.
Cifra nu se închide automat dacă primul și ultimul punct nu se potrivesc. Putem aplica atributul de umplere pentru a umple forma, dar rezultatul nu va fi exact la fel ca la umbrirea unor forme închise.
- rotund
element
De asemenea, puteți specifica o lățime și o culoare a cursei.
Puteți transfera o parte din cod din SVG în CSS.
Combinația mai multor cercuri ne va permite să creăm scutul lui Captain America.
Captain America's Shield
- elipsă
Elipsa este trasă ca un cerc, sunt indicate doar două valori de rază și un punct central. Atributele cx și cy plasează punctul central la distanța specificată de la începutul coordonatelor SVG, valorile lui rx și ry determină raza laturilor figurinei.
Adăugați o referință la elipsă și definiți proprietatea CSS
- dreptunghiuri
Un dreptunghi are mai multe atribute decât un cerc. Dar, în general, este clar - coordonatele primului punct din colțul din stânga sus, lățimea și înălțimea.
Atributele de lățime și înălțime stabilesc dimensiunea dreptunghiului, dacă nu sunt specificate unități, în mod implicit acestea vor fi pixeli.
Atributul de umplere este culoarea interioară a formei. Dacă atributul nu este specificat, culoarea implicită este neagră.
Coordonatele x și y vor plasa forma de-a lungul axei corespunzătoare în funcție de dimensiunile stabilite de element.
Puteți roti colțurile prin atributele rx și ry.
Puteți specifica diferite valori pentru rx și ry.
- poligon
Desenați un triunghi. În atributul puncte, trebuie să specificați coordonatele punctelor - vârfurile triunghiului. Perechile valorilor coordonatelor pentru fiecare punct sunt separate printr-o virgulă. Ordinea punctelor nu este importantă. De asemenea, nu este necesar să conectați primul și ultimul punct, acest lucru se întâmplă automat.
Exemplu pentru un triunghi echilateral.
Dacă există mai mult de trei puncte, puteți face o greșeală cu ușurință și puteți crea o cifră complet diferită, care a fost de așteptat.
Există figuri cunoscute ale căror coduri pot fi copiate pur și simplu.
grup
O etichetă specială SVG vă permite să grupați și să gestionați elementele asociate. Creați două forme cu aceleași proprietăți.
Puteți utiliza identificatorul și puteți scoate separat proprietățile.
Lectură suplimentară
Înapoi la SVG
Articole similare
Trimiteți-le prietenilor: