SVG conține următorul set de forme de bază: dreptunghi, cerc, elipsă, linii drepte, linii întrerupte și poligoane. Fiecare element necesită un set de atribute, astfel încât acesta să poată fi afișat, de exemplu. coordonatele și parametrii de mărime.
dreptunghi
element definește un dreptunghi
Atributul de lățime și înălțime stabilește dimensiunea dreptunghiului, în timp ce umplerea este culoarea internă a formei. Dacă nu sunt specificate unități, în mod implicit vor fi pixeli și dacă nu specificați umplerea. în mod implicit, culoarea va fi neagră.
Alte atribute care pot fi adăugate sunt coordonatele x și y. Aceste valori deplasează figura de-a lungul axei corespunzătoare în funcție de dimensiunile stabilite de element
De asemenea, este posibil să creați colțuri rotunjite prin specificarea valorilor din atributele rx și ry. De exemplu, rx = "5" ry = "10" va genera laturile orizontale ale colțurilor cu o rază de 5px, iar cele verticale în 10px.
element Bazat pe punctul central și pe raza exterioară.
Coordonatele cx și cy determină poziția centrului cercului în raport cu dimensiunile zonei de lucru specificate de element
Atributul r stabilește dimensiunea razei exterioare.
element descrie o elipsă construită în jurul unui punct central și a două raze.
In timp ce valorile cy și cx atributele punct central este amplasat la o distanță specificată în pixeli de la începutul SVG valorile coordonatelor și ry rx figuri laturi de rază determinate.
Acest element definește o linie dreaptă cu un început și un punct final.
Valorile atributelor x1 și y1 stabilesc coordonatele de la începutul liniei, iar valorile x2 și y2 determină sfârșitul liniei.
Linia întreruptă
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 din 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.
poligon
element definește o cifră închisă formată din linii conectate.
Vârfurile poligonului sunt date de o succesiune de opt perechi de valori ale lui x, y.
De asemenea, în funcție de numărul de puncte care urmează a fi determinate, acest element poate crea alte forme închise.
Element de cale
Elementul de traseu SVG este o schiță de formă. Această formă poate fi umplută, încrucișată, utilizată ca un ghid pentru text și / sau ca o bucla de tăiere.
În funcție de formă, aceste contururi pot fi foarte complexe, mai ales atunci când conțin multe curbe. Dar dacă înțelegeți lucrarea lor și sintaxa corespunzătoare, atunci aceste contururi vor deveni mult mai ușor de gestionat.
Căi de date
Datele de cale sunt cuprinse în atributul d din interiorul elementului . determinarea formei figurii:
Comenzile moveto (M sau m) stabilesc noi puncte, ca și cum am ridica mânerul și începem să desenăm într-un loc nou pe o foaie de hârtie. Linia de cod care compilează datele căii trebuie să înceapă cu comanda moveto, așa cum se arată mai sus în exemplul de calcar.
Comenzile moveto care urmează originalul reprezintă începutul unui nou fragment de cale, creând o cale compusă. Capitolul M indică faptul că coordonatele absolute o urmează, în timp ce m-ul m indică coordonatele relative.
Calea apropiată (Z și z) sfârșește fragmentul de cale curentă și trasează o linie dreaptă de la punctul curent la punctul de plecare.
Dacă comanda moveto urmează imediat calea apropiată, coordonatele moveto reprezintă începutul următorului fragment al căii. Dacă următoarea cale este urmată de orice altă comandă decât moveto, atunci fragmentul următor al căii începe în același punct ca fragmentul curent al căii.
Ambele litere de sus și de jos z au aceleași rezultate.
Comenzile lineto trasează linii drepte de la punctul curent la cel nou.
Comenzile L și l trasează o linie de la punctul curent la următoarele coordonate de punct furnizate. Acest punct nou devine punctul actual și așa mai departe.
Capitalul L înseamnă că după ce trece poziția absolută, în timp ce după l - relativă.
Comenzile H și h desenează o linie orizontală din punctul curent.
Capitolul H înseamnă că după ce trece poziția absolută, în timp ce după h - relativă.
Comenzile V și V desenează o linie verticală din punctul curent.
Capitolul V înseamnă că după ce trece poziția absolută, în timp ce după v - relativă.
Comenzi pentru crearea de curbe
Pentru desen curbelor există trei grupe de comenzi: o curbă Bezier cubică (C, c, S, s), curba Bezier pătratice (Q, q, T, t), și arcul elipsă (A, a) ..
Următoarele secțiuni de pe curbe introduc conceptele de bază ale fiecărei comenzi pentru curbe, iau în considerare detaliile construcției și apoi dau diagrama pentru o mai bună înțelegere.
Curba Cube Bezier
Echipele C și c descriu curba cubică Bezier din punctul curent, utilizând parametrii (x1, y1), ca punct de control la începutul curbei și (x2, y2), ca punct de control la final, forma curba definind caracteristici.
S s și trage, de asemenea, o curbă Bezier cubică, dar în acest caz se presupune că primul punct de control este o reflectare a doua comandă (referindu-se la al doilea punct de control al comenzii anterioare, o descriere mai detaliată vezi mai jos -. Cca Trans ..).
Următorul cod trage o curbă de bază Bezier cubică:
Controlul primului și ultimului set de valori pentru această curbă va afecta poziția sa inițială și de sfârșit, în timp ce controlul a două valori centrale va afecta forma și orientarea curbei însăși la început și la sfârșit.
Comenzile S s și, de asemenea, desena o curbă Bezier cubică, dar în acest caz se presupune că primul punct de control este o reflectare ultima instrucțiune anterioară C. Reflection produs în raport cu comanda punct de pornire S.
Semnalul C mai mare indică faptul că este urmată de poziționarea absolută, în timp ce după litera c, este relativă. Aceeași logică se aplică lui S și s.
Quadratic Bezier curve
Plăcile quadratice Bezier (Q, q, T, t) sunt similare cu cele cubice, dar au un singur punct de control.
Următorul cod trage curba de bază Bezier.
Controlul primului și ultimului set de valori, M20,50 și 100,50, va afecta poziționarea punctelor de început și de sfârșit ale curbei. Setul central de valori Q40.5 definește punctul de control pentru curbă, determinând forma sa.
Q și q trasează o curbă de la punctul de început până la punctul final, folosind (x1, y1) ca punct de control. T și t trage o curbă de la punctul de început până la punctul final, presupunând că punctul de control este reflexia punctului de control al comenzii precedente față de punctul de pornire al noii comenzi T sau t.
Capitalul Q semnalează că este urmată de poziționarea absolută, în timp ce după q mai mică este relativă. Aceeași logică se aplică T și t.
Arcul elipsei
Arcul elipsei (A, a) definește o parte a elipsei. Aceste părți sunt create folosind comenzile A sau a, care creează un arc prin specificarea punctelor de început și de sfârșit, a radielor x și y, a rotației și a direcției.
Uită-te la codul pentru arcul de bază al elipsei:
Primul și ultimul set de valori din cadrul acestui contur, M65,10 și 50,25 reprezintă coordonatele inițiale și finale, iar cele două seturi de valori definesc două raze. Valorile 1, 0 (pavilionul cu arc mare și drapelul) determină modul în care arcul va fi tras, deoarece există patru opțiuni diferite pentru acest lucru.
Următoarea diagramă arată patru opțiuni pentru selectarea unui arc și modul în care valorile arcului de mare arc și a valorii de străpungere afectează harta finală a segmentului de arc.
Programele pentru grafica vectorială vă permit să generați forme și forme mai complexe, în timp ce produceți cod SVG care poate fi preluat, utilizat și procesat în altă parte.
Odată ce grafica este gata, codul XML generat, care poate fi suficient de lung în funcție de complexitate, poate fi copiat și încorporat în HTML. Defalcarea fiecărei secțiuni a SVG și disponibilitatea elementelor organizaționale corecte poate ajuta foarte mult în navigarea și înțelegerea acestor documente aparent complexe și verbose.
Aici este un cod SVG pentru imaginea mai multor cireșe cu adăugarea de clase pentru navigare avansată:
Atributele în elementul svg definesc un spațiu de lucru sau o "pânză" pentru grafică. Frunzele și tuioanele sunt în același element (grup) și cireșe în altul. Șirul de valori numerice definește conturul graficului, iar atributele umplerii și cursei au stabilit culoarea pentru fundal și pentru margini.
Înainte de a pune acest cod în HTML, acesta poate fi copiat și trecut prin SVG-optimizator, care, la rândul său, va ajuta la eliminarea cod suplimentar, spații libere și de a reduce foarte mult dimensiunea fișierului. SVG-optimizer Peter Collingridge sau SVGO - instrumente foarte utile în acest sens.
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima schimbare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ... MAI MULT
Din Paris (în fotografie), unde a avut loc recent întâlnirea grupului de lucru CSS, au apărut știri interesante: proprietățile din grilă și decalajul dintre grilă și coloană, precum și diferența dintre ele ...
