svg - 用一行 XML 旋转

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 中，它已经可以在没有前缀的情况下工作。