SVG 旋转属性

SVG 是一种矢量图形格式，可用于在 Web 中呈现图像。SVG 旋转属性可用于旋转 SVG 元素。本文将介绍 SVG 旋转属性的使用方式及示例。

语法

SVG 旋转属性使用 transform 属性表示。

<element transform="rotate(angle [cx cy])">

其中：

• angle：表示旋转的角度，可以是正负数或带小数点的数字。
• cx 和 cy：表示旋转中心的坐标，是可选项，默认为元素的中心点。

示例

以下是一些示例，展示了如何使用 SVG 旋转属性。

基本旋转

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red"
    transform="rotate(45 50 50)" />
</svg>

该示例创建一个 100×100 的 SVG 元素，其中包含一个红色矩形。该矩形使用 transform 属性旋转了 45 度。

旋转动画

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue">
    <animateTransform attributeName="transform" attributeType="XML"
      type="rotate" from="0" to="360" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

该示例使用 SVG 动画在一个蓝色矩形上创建旋转效果。矩形使用 animateTransform 元素的 attributeName 属性设置了 transform，然后使用 type 属性指定了旋转类型，从 0 到 360 度旋转。

总结

SVG 旋转属性是一种有用的属性，它允许您在 SVG 元素中创建旋转效果。通过 transform 属性，可以将一个元素旋转任意角度，实现多种不同的效果。