Procentowe pochodzenie transformacji dla SVG nie jest przestrzegane w Firefoksie, tylko czasami w WebKit

Question

Mam ten szyszek lodów SVG, i chcę przetworzyć szufelkę z transform-origin z 50% 100% (środkowe dno). Firefox twierdzi, że jest posłuszny (to znaczy, że inspektor odnotowuje poprawną transform-origin), ale w rzeczywistości przekształca się w lewym górnym rogu. WebKit, co dziwne, będzie przestrzegany tylko wtedy, gdy element nadrzędny ma zestaw font-size:100%.

Są bardzo podobne pytania, ale dotyczą tylko Firefox:

1. Setting transform-origin on SVG group not working in FireFox

2. How to set transform origin in SVG

3. Transform Origin not working in Firefox

Answer 1

Niedawno przyjechałem w tym samym problemie; Oto, jak go rozwiązałem:

Według głównych przeglądarek po prostu nie są spójne w stosowaniu transform-origin do elementów SVG. Autor strony stworzył platformę animacji JavaScript o nazwie GSAP i wyjaśnia niektóre z jej obliczeń transform-origin w artykule. Choć jesteś mile widziany, aby zaimplementować matematykę za pomocą JavaScript, aby naprawić początki SVG, przyjrzałem się GSAP (szczególnie narzędziu TweenLite) i idealnie pasowało do moich potrzeb. Jeśli dobrze używasz zewnętrznej biblioteki w swojej witrynie, poleciłbym użyć jego narzędzia do animacji elementów SVG, ponieważ pozwala na stałe animowanie elementów we wszystkich głównych przeglądarkach. Oczywiście nie jest to lepsze niż transform-origin po prostu działa tak, jak powinno, ale do aktualizacji przeglądarek jest to dla mnie odpowiednia alternatywa.