Naučte se otočit ve SVG

Funkce rotace vektorů pro škálovatelnou grafiku

Otáčením obrázku se změní úhel, na kterém je tento obrázek zobrazen. Pro jednoduchou grafiku to může přidat určitou rozmanitost a zájem o to, co jinak může být přímočarý nebo nudný obraz. Stejně jako u všech transformací, rotace funguje jako součást animace nebo statické grafiky. Naučte se používat otočení v programu SVG nebo škálovatelné vektorové grafiky vám umožňuje požadovat výrazný úhel tvaru vašeho tvaru. Funkce otáčení SVG slouží k otočení obrázku v obou směrech.

O Otočení

Funkce rotace se týká pouze úhlu grafiky. Když vytvoříte obrázek SVG , vytvoříte statický model, který pravděpodobně sedí v tradičním úhlu. Například čtverec bude mít dvě strany podél osy X a dvě podél osy Y. Při otočení můžete vzít stejné čtverce a změnit jej na diamantovou formu.

S tím jediným účinkem jste vyrazili z velmi typického boxu (který je na webových stránkách velmi běžný) na diamant, který vůbec není běžný a který nepřinesl zajímavý vizuální rozmanitost designu. Otočení je také součástí animačních kapacit v SVG. Kruh se může stále zobrazovat. Tento pohyb může upoutat pozornost návštěvníků a pomoci vám zaměřit své zkušenosti na klíčové oblasti nebo prvky v designu.

Otočit práce na teorii, že jeden bod na obrázku zůstane pevně. Představte si kus papíru připevněného k kartonu pomocí push-pinu. Poloha pinů je pevná místa. Pokud papír otáčíte okrajem a otáčíte ho po směru hodinových ručiček nebo proti směru hodinových ručiček, tlačný kolík se nikdy nepohybuje, ale obdélník stále mění úhly. Papír se bude otáčet, ale pevný bod čepu zůstane nezměněn. To je velmi podobné tomu, jak funguje funkce rotace.

Otočte syntaxi

S otočením zobrazíte úhel otočení a souřadnice pevného prostoru.

transformace = "otočit (45,100,100)"

Úhel natočení je první věc, kterou přidáte. V tomto kódu je úhel natočení 45 stupňů. Středem je to, co byste přidali dál. Zde je tento střed umístěn na souřadnicích 100, 100. Pokud nezadáte souřadnice středové polohy, budou výchozí hodnoty 0,0. V níže uvedeném příkladu by byl úhel ještě 45 stupňů, ale protože středový bod nebyl stanoven, bude výchozí hodnota 0,0.

transformace = "otočit (45)"

Ve výchozím nastavení se úhel pohybuje směrem k pravé straně grafu. Chcete-li otočit tvar v opačném směru, použijete znaménko mínus pro vypsání záporné hodnoty.

transform = "otočit (-45)"

45 stupňů rotace je čtvrtina otáčky, protože úhly jsou založeny na 360-stupňovém kruhu. Pokud uvedete revoluci jako 360, snímek se nezmění, protože doslova ji převrátíte v plném kruhu, takže konečný výsledek bude shodný vzhledu s místem, kde jste začali.