Процентът transform-origin за SVG не се спазва във Firefox, само понякога в WebKit

Имам тази SVG графика за фунийка за сладолед и искам да трансформирам лъжичката с transform-origin от 50% 100% (централно отдолу). Firefox твърди, че се подчинява (т.е. инспекторът отбелязва правилното transform-origin), но всъщност се трансформира около горния ляв ъгъл. WebKit, странно, ще се подчинява само ако родителският елемент има font-size:100% set.

Това са много подобни въпроси, но се отнасят само за Firefox:

  1. Задаването на transform-origin на SVG група не работи във FireFox

  2. Как да задам източник на трансформация в SVG

  3. Transform Origin не работи във Firefox


svg html css css-transforms transform
person Toph    schedule 08.07.2013    source източник
comment
Грешката, която споменахте като коментар в другите въпроси, няма нищо общо с transform-origin. Ако бях на твое място, щях да направя нов бъг в bugzilla с прикачения тестов случай.   -  person Robert Longson    schedule 08.07.2013
comment
Да, разбрах, че след факта, моя грешка... и ще го направя.   -  person Toph    schedule 08.07.2013
comment
@Toph Намерих вашия доклад за грешка в bugzilla. Може да искате да гласувате за отстраняване на бъг #923193. Към момента на писане има само 4 гласа.   -  person dotnetCarpenter    schedule 21.05.2014
comment
Предполага се, че е коригирано във Firefox 41 bugzilla.mozilla.org/show_bug.cgi?id=923193 но в Nightly все още не се държи според очакванията (т.е. като WebKit / Blink).   -  person Toph    schedule 17.06.2015

Отговори (1)


arrow_upward
1
arrow_downward

Съвсем наскоро се натъкнах на същия проблем; ето как го реших:

Според тази страница за SVG анимация с CSS трансформации, основните браузъри просто все още не са последователни в прилагането на transform-origin към SVG елементи. Авторът на страницата създаде платформа за анимация на JavaScript, наречена GSAP, и обяснява някои от своите transform-origin изчисления в статията. Въпреки че сте повече от добре дошли да приложите сами математиката с JavaScript, за да коригирате произхода на SVG, аз разгледах GSAP (по-специално инструмента TweenLite) и в крайна сметка той отговаряше идеално на нуждите ми. Ако се справяте с използването на външна библиотека в уебсайта си, бих препоръчал да използвате неговия инструмент за извършване на анимация върху SVG елементи, тъй като ви позволява да анимирате елементи последователно във всички основни браузъри. Очевидно не е за предпочитане пред transform-origin просто да работи както трябва, но докато браузърите не се актуализират, това беше подходяща алтернатива за мен.

person jming    schedule 23.05.2015