html - 了解跨浏览器转换和起源

Question

我显然在这里遗漏了一些东西，希望有人可以为我填补关于跨浏览器 transform 和 origin 与 SVG 一起使用的空白。

所以这个问题的快速版本，为什么下面的例子在 Chrome 中看起来/像预期的那样工作，但是 origin 在 Firefox 中被搞乱了，而在 IE 中 transform 似乎根本不起作用？ (红色的东西应该像在 Chrome 中一样均匀地围绕绿色椭圆圈，但适用于所有浏览器)。

我只是没有正确指定属性，缺少必要的前缀来转换关于 IE 的内容吗？我从事桌面开发的时间太长了，并且正在摆脱一些网络技能的生锈，所以我很感激你可能提供的任何一 block 不起眼的馅饼。 :)

CodePen

@keyframes rotateIT {
  0% {} 100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateIT {
  0% {} 100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
}

#damnit {
  animation: rotateIT 3s ease infinite;
  transform-origin: center;
  -webkit-transform-origin: center;
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Yes, I left the objects off-center of canvas on purpose for this example of origin issues. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="150px" height="150px" viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve">
<circle fill="#00A651" cx="57.5" cy="55.5" r="25"/>
<g id="damnit">
	<path fill="#BE1E2D" d="M63,23.475c13.742,2.354,24.567,13.357,26.639,27.192h10.078C97.516,31.312,82.265,15.87,63,13.368V23.475z
		"/>
	<path fill="#BE1E2D" d="M25.361,50.667c2.105-14.059,13.247-25.2,27.306-27.306V13.283C33.088,15.51,17.51,31.088,15.283,50.667
		H25.361z"/>
	<path fill="#BE1E2D" d="M52.667,87.639C38.832,85.567,27.829,74.742,25.475,61H15.368c2.502,19.265,17.944,34.516,37.299,36.717
		V87.639z"/>
	<path fill="#BE1E2D" d="M89.525,61C87.21,74.52,76.52,85.21,63,87.525v10.106C82.042,95.159,97.159,80.042,99.632,61H89.525z"/>
</g>
</svg>

Answer 1

正如@DaniP 指出的那样，caniuse.com 将成为您解决跨浏览器问题的首选资源。来自更直接的链接 http://caniuse.com/#feat=transforms2d : IE <= 10 不支持 svg 元素的转换。

并且 FF 在 svg 元素上遇到 transform-origin 问题。在 SO 中搜索 "firefox transform-origin svg" - 有一些答案可以让人们得到它的工作(例如使用 transform: rotate(deg, cx, cy))但是当我测试你的例子时那些对我不起作用。 Mozilla 有几个与此相关的错误 - 例如关闭https://bugzilla.mozilla.org/show_bug.cgi?id=923193 ，其中最后一条评论是“这不应该被关闭”