svg - 回転する with one line of XML

Question

たった1行のコードでSVGグラフィックを回転させる方法はありますか? すべての要素のグループまたはレイヤーを作成するのが最善の方法ですか?

Answer 1

このtransform属性は document 要素では許可されていない<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 では、プレフィックスなしで既に動作します。