Svg-forme și transformări • despre css

Figurile SVG și transformările

Este destul de ușor să scrieți SVG. Sunt utilizate următoarele figuri: rect. poligon. cerc. elipsă. și, linia. polilin și calea. Setați forma selectată, definiți dimensiunile și coordonatele acesteia, apoi adăugați un fundal și un curs.







Dimensiunile și coordonatele sunt stabilite pentru diferite forme în moduri diferite, dar fundalul și cursa sunt aceleași pentru toate:

umple - umple. Puteți seta culoarea în orice mod. Transparența nu este nici una sau transparentă. Culoarea implicită este neagră; accident vascular cerebral - culoarea accidentului; greutatea la cursa - grosimea cursei, implicit este 1. Nici un accident vascular cerebral nu funcționează.

Mai jos puteți vedea exemple de forme și transformări simple SVG care pot fi aplicate pentru ele.

x. y - coordonatele colțului din stânga sus al figurii; lățime. înălțimea - lățimea și înălțimea dreptunghiului.

Colțurile rotunjite sunt specificate de parametrii rx și ry. Dacă este specificat doar unul dintre parametri, filetul vertical și orizontal va fi același:







Dacă sunt specificați ambii parametri (și sunt încă diferiți), raza de rotunjire va fi diferită:

În puncte, x, y sunt coordonatele vârfurilor figurinei, printr-un spațiu.

poligonul se închide singur, ultimul punct poate fi omis.

r este raza cercului; cx. cy sunt coordonatele centrului cercului.

rx. ry - razele orizontale și verticale ale elipsei; cx. cy sunt coordonatele centrului elipsei.

Formele mai complexe pot fi realizate dintr-o combinație de simple:

În acest caz, stilul cifrelor poate fi setat o dată pentru întregul grup și nu separat pentru fiecare figură:

Puteți, de asemenea, desena cu linii simple.

x1. y1. x2. y2 - coordonatele începutului și sfârșitului liniei.

În puncte, x, y sunt coordonatele punctelor, fiecare punct fiind un spațiu.

Pentru linii și forme mai complexe, există o etichetă de cale. dar acest subiect ar trebui să fie luat în considerare separat.

Formatele SVG pot fi modificate utilizând proprietatea transformă.

Valorile posibile sunt: ​​traduceți. scară. roti. skewX. skewY. matrice.

Puteți specifica mai multe transformări, separate prin virgule sau spații.

traduce (tx [ty])

Dacă al doilea parametru nu este specificat, este 0.







Articole similare

Trimiteți-le prietenilor: