小编Max*_*kov的帖子

Safari 不尊重 `transform-origin` SVG 属性

我正在尝试使用属性构建 SVG transform。但是，虽然我的 SVG 在 Chrome 和 Firefox 中看起来符合预期，但在 Safari 中看起来却损坏了。看起来 Safari 不尊重transform-origin属性，总是应用transform类似transform-origin的"0 0"值。

我需要对transform属性进行动画处理，并且需要生成的 SVG 在所有浏览器中看起来都相同。我尝试通过为transform-boxCSS 属性提供不同的值来解决这个问题，但没有成功。

该问题有解决方法吗？

下面是说明该问题的示例。所有图像应该看起来相同。它们在 Chrome 和 Firefox 中看起来相同，但在 Safari 中则不同。

h1 {
  font-family: sans-serif;
}

figure {
  border: thin #c0c0c0 solid;
  display: inline-flex;
  flex-flow: column;
  padding: 5px;
  max-width: 200px;
  margin: auto;
}

figcaption {
  margin-top: 5px;
  background-color: #222;
  color: #fff;
  font: smaller sans-serif;
  padding: 3px;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)