第七天：如何用SVG画星星

如何使用 SVG 元素的transform属性

星星是一个简单的形状。我们可以将其定义为一堆多边形，并单独设置每个点。但这样我们就需要知道每个坐标。与其这样，我们可以只定义一个角，然后重复五次并进行旋转，以获得相同的形状。我们将使用transform属性来设置旋转。

首先，我们来定义一个角。在本例中，每个角由两个多边形组成。

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <polygon
    points="0,0 36,-50 0,-100"
    fill="#EDD8B7" 
  />
  <polygon 
    points="0,0 -36,-50 0,-100"
    fill="#E5C39C" 
  />
</svg>

我们可以用 g 元素将它们分组，然后一起旋转。你可以把 g 元素想象成 HTML 中的 div 元素。它可以包含其他元素，而 group 元素上定义的属性也适用于它的子元素。

然后，我们将每只星星角旋转rotate到正确的位置。

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <g transform="translate(0 5)">
    <g>
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(-72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(-144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
  </g>
</svg>

你可能会注意到，我们定义的多边形是从坐标系的原点（即图像的中心）开始的。默认情况下，旋转也是围绕坐标系的原点进行的。

由于我们有五个角，图像的底部比顶部短一些。为了使图像居中，我们可以将整个星星组合在一起，然后使用平移变换translate将所有物体沿 Y 坐标向下移动 5 个单位。

在这个示例中，我们不得不反复复制粘贴每个星角的代码。在下一个示例中，我们将看到如何重复使用形状。

分享：