Dowiedz się, jak obracać grafikę w SVG

Korzystanie z funkcji obracania w skalowalnej grafice wektorowej

mfto / Getty Images

The obracać się funkcjonować w SVG (skalowalna grafika wektorowa) pozwala określić kąt, pod jakim chcesz obrócić dany obraz. Obraca obraz w dowolnym kierunku.​

Konsorcjum World Wide Web (W3C) definiuje SVG jako „język oparty na XML do opisu dwuwymiarowej grafiki wektorowej i mieszanej grafiki wektorowej/rastrowej. Treść SVG jest stylowalna, skalowalna do różnych rozdzielczości wyświetlania i może być przeglądana samodzielnie, zmieszana z treścią HTML lub osadzona przy użyciu przestrzeni nazw XML w innych językach XML. SVG obsługuje również zmiany dynamiczne; skryptu można używać do tworzenia interaktywnych dokumentów, a animacje można wykonywać za pomocą funkcji animacji deklaratywnej lub za pomocą skryptu.'

O Obróć

The obracać się funkcja polega na kącie grafiki. Kiedy ty zaprojektuj obraz SVG , tworzysz statyczny model, który prawdopodobnie będzie siedział pod tradycyjnym kątem. Na przykład kwadrat będzie miał dwa boki wzdłuż osi X i dwa wzdłuż osi Y. Z obracać się , możesz zamienić ten sam kwadrat w diament.

Tylko w tym jednym efekcie przeszło się z typowego pudełka (powszechny element na stronach internetowych) do diamentu, który dodaje ciekawego wizualnego urozmaicenia projektowi. Obracać się jest również częścią możliwości animacji SVG. Na przykład okrąg może się stale obracać, gdy jest wyświetlany. Ten ruch może skoncentrować doświadczenie odwiedzającego na kluczowych obszarach lub elementach projektu.

Obracać się zakłada, że ​​jedna kropka na obrazie pozostanie stała. Wyobraź sobie kawałek papieru przyczepiony do tektury za pomocą pinezki; lokalizacja pinu to stałe miejsce. Jeśli chwycisz krawędź papieru i obrócisz go, pinezka nie poruszy się, ale prostokąt się obróci. W ten sposób obracać się funkcja działa.

Obróć składnię

Używać obracać się , określ kąt skrętu i współrzędne ustalonego obszaru:

|_+_|

W tym kodzie kąt obrotu wynosi 45 stopni. Następnie pojawia się punkt środkowy; w tym przykładzie jego współrzędne wynoszą 100 na osi x i 100 na osi y. Jeśli nie wprowadzisz współrzędnych pozycji środkowej, domyślnie będą to 0,0. W poniższym przykładzie kąt nadal wynosi 45 stopni, ale punkt środkowy nie został ustalony; dlatego domyślnie będzie to 0,0.

|_+_|

Domyślnie kąt idzie w kierunku prawej strony wykresu. Aby obrócić kształt w przeciwnym kierunku, użyj znaku minusa, aby określić wartość ujemną:

|_+_|

Obrót o 45 stopni to ćwierć obrotu, biorąc pod uwagę, że kąty są oparte na okręgu 360 stopni. Jeśli wymienisz rewolucję jako 360, obraz nie zmieni się, ponieważ obrócisz go po pełnym okręgu.

W ten sposób, obracać się daje pełną kontrolę nad kątami obrazów.