使用一行 XML 旋转 <svg>

Question

有没有一种方法可以只用一行代码来旋转 SVG 图形？为所有元素创建一个组或图层是最好的方法吗？

Answer 1

由于transform文档元素上不允许使用该属性，因此您需要一个<g>包含要旋转的所有内容的元素。

但如果 SVG 嵌入 HTML 中，您可以使用 CSS 转换：

<svg xmlns="http://www.w3.org/2000/svg" style="transform:rotate(45deg)" width="10" height="10">
  <rect width="10" height="10"/>
</svg>

不幸的是，现在您仍然需要供应商前缀，例如-webkit-transform. 在 Firefox 中，它已经可以在没有前缀的情况下工作。