在Firefox中不遵守SVG的变换原点百分比，有时在WebKit中 [英] Percentage transform-origin for SVG not obeyed in Firefox, only sometimes in WebKit

问题描述

我有这个冰激凌锥形SVG图形，我想用 transform-origin 的 50％100％ code>（中间底部）。 Firefox声称服从（即检查员注意到正确的 transform-origin ），但实际上是围绕左上角转换。 WebKit，奇怪的是，只有当父元素 font-size：100％设置时才会服从。

I have this ice cream cone SVG graphic, and I want to transform the scoop with a transform-origin of 50% 100% (center bottom). Firefox claims to obey (i.e. the inspector notes the correct transform-origin) but in fact transforms about the upper left corner. WebKit, bizarrely, will only obey if a parent element has font-size:100% set.

非常类似的问题，但只适用于Firefox：

These are very similar questions but only pertain to Firefox:

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

如何在SVG中设置变换原点

How to set transform origin in SVG

Transform原因在Firefox中不起作用

推荐答案

遇到同样的问题;这里是我如何解决它：

Just recently I came across the same problem; here's how I went about solving it:

根据使用CSS变换的SVG动画上的此页面，主要浏览器在将 transform-origin 应用于SVG元素时并不一致。网页的作者创建了一个名为 GSAP 的JavaScript动画平台，并解释了其一些变换-origin 计算。虽然你欢迎使用JavaScript实现数学自己修复SVG起源，我看看GSAP（特别是TweenLite工具），它最终满足我的需要完美。如果你确定在你的网站使用外部库，我建议使用他的工具来执行SVG元素的动画，因为它允许你在所有主要浏览器中一致地动画元素。显然不是优选的 transform-origin 只是工作，因为它应该是，但直到浏览器更新，这已经是我的一个合适的替代品。

According to this page on SVG animation with CSS transforms, major browsers simply aren't consistent in applying transform-origin to SVG elements yet. The author of the page created a JavaScript animation platform called GSAP, and explains some of its transform-origin calculations in the article. While you're more than welcome to implement the math yourself with JavaScript to fix SVG origins, I took a look at GSAP (specifically the TweenLite tool) and it ended up suiting my needs perfectly. If you're OK using an external library in your website, I would recommend using his tool to perform animation on SVG elements, since it allows you to animate elements consistently across all major browsers. It's obviously not preferable to transform-origin simply working like it's supposed to, but until browsers update, this has been a suitable alternative for me.

这篇关于在Firefox中不遵守SVG的变换原点百分比，有时在WebKit中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！