Temat: Punkt obrotu dla obiektu

Dzień dobry
Potrzebuję dla grafiki svg ustawić punkt obrotu w innym miejscu niż środek. Tak by punkt obrotu dla tej grafiki był już domyślny na stałe.
Potem chcę daną grafikę animować poprzez kod na stronie internetowej i dlatego niezbędne jest ustawienie punktu obrotu już teraz.
Niestety mam wrażenie, ze opisany niżej, stosowany przeze mnie sposób, nie sprawia, że wybrany przeze mnie punkt jest już dla tego obiektu domyślnym na stałe.

1. Zaznaczasz obiekt
2. Stukasz w klawisz [R]
3. Lewym przyciskiem myszy, pojedynczym kliknięciem wybierasz punkt wokół którego ma się obracać obiekt.
4. Lewym przyciskiem myszy (przytrzymując go) obracasz obiektem
Dominik K.

Dominik K. designer & developer

Temat: Punkt obrotu dla obiektu

To jest metoda i punkt obrotu dla programu Illustrator i nie zapisuje w pliku SVG takiej informacji, no chyba, że jest to możliwe (np. kodem xml) ale napewno illustrator nie "przemyca" tej informacji zmianą punktu obrotu z pomocą metody którą opisujesz.

Jeśli chodzi o samego SVG programowanego z poziomu HTML/CSS/JS i manipulacje na jego środku obrotu to moim zdaniem już tylko programowaniem. Nie wiem dokładnie jak domyśnie SVG mają punkt obrotu, czy z rogu górnego lewego czy ze srodka bounding-box, tutaj od domyślnego punktu trzeba ustalić nową pozycję i napisać najpewniej funckję w Javascrypcie. Trochę matematyki. Jeżeli jest to środek i chcesz osiągnąc lewą krawędź to musisz pozyskać dane szerokości swego SVG - wartość width, nastepnie odjąć od niej wartość width/2. To samo z wysokością. Mówię mniej więcej, bo powiem szczerze, że się tym nigdy nie bawiłem. Mam raczej doświadczenie z podobnej i archaicznej już technologi Flash i zabawie na MovieClip'ach.Ten post został edytowany przez Autora dnia 22.01.18 o godzinie 01:58
Dominik K.

Dominik K. designer & developer

Temat: Punkt obrotu dla obiektu

Poszperawszy trochę znalazłem to, trochę stary artykuł, ale powinno działać:
http://www.petercollingridge.co.uk/blog/svg-animation-...

Trochę można pomodyfikować warości 'cx' i 'cy'. Ten post został edytowany przez Autora dnia 23.01.18 o godzinie 14:49

Następna dyskusja:

Kreatywnybazar.pl - nowy se...




Wyślij zaproszenie do