Question

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

所以问题的快速版本，为什么下面的示例在Chrome中看起来/按预期工作，但origin在Firefox中搞砸了，而在IE中，transform没有＆＃39;似乎工作？（红色的东西应该像绿色椭圆一样环绕绿色椭圆，但是对于所有浏览器都是如此）。

我只是没有正确指定属性，缺少必要的前缀来转换IE？我已经做了太长时间的桌面开发工作，并且正在踢掉一些网络技能，所以我很欣赏你可能提供的任何一块不起眼的馅饼。：）

CodePen

＆＃13;

@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;
}

＆＃13;

<?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>

＆＃13;

Answer 1

正如@DaniP指出的那样，caniuse.com将成为您解决跨浏览器问题的首选资源。从更直接的链接http://caniuse.com/#feat=transforms2d：IE＆lt; = 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，其中最后一条评论是“不应该关闭”

了解跨浏览器转换＆amp;起源

1 个答案: