如何使用svg画一个正六边形
时间: 2023-07-20 22:24:37 浏览: 129
可以使用 SVG 的 `<polygon>` 元素来画一个正六边形,具体步骤如下:
1. 在 SVG 中创建一个 `<polygon>` 元素。
2. 设置 `<polygon>` 元素的 `points` 属性,用于指定正六边形的六个顶点坐标。
3. 设置 `<polygon>` 元素的其他属性,比如 `stroke`(边框颜色)、`stroke-width`(边框宽度)、`fill`(填充颜色)等。
以下是一个画正六边形的示例代码:
```html
<svg width="100" height="100">
<polygon points="50,0 95,25 95,75 50,100 5,75 5,25"
stroke="black" stroke-width="2" fill="none" />
</svg>
```
其中,`points` 属性的值为 `"50,0 95,25 95,75 50,100 5,75 5,25"`,这里的坐标按顺序依次为正六边形的顶点坐标。注意,这里的坐标是相对于 SVG 元素左上角的,因此正六边形的中心点并不在坐标原点。如果需要把正六边形放置在 SVG 中心,可以按比例计算出顶点坐标。
相关问题
svg画正五边形和正六边形
以下是一个使用SVG绘制正五边形和正六边形的代码示例:
```HTML
<svg viewBox="0 0 100 100">
<!-- 正五边形 -->
<polygon points="50,5 95,35 80,90 20,90 5,35" fill="red"/>
<!-- 正六边形 -->
<polygon points="50,5 90,25 90,75 50,95 10,75 10,25" fill="green"/>
</svg>
```
代码解释:
- `viewBox` 属性定义了SVG视口的大小和位置。
- `polygon` 标签绘制了一个多边形,`points` 属性定义了多边形的顶点坐标,`fill` 属性分别设置为 `red` 和 `green`,表示填充颜色为红色和绿色。
正五边形和正六边形的顶点坐标可以通过计算得到,这里不再赘述。
运行上述代码,将会在浏览器中显示一个正五边形和一个正六边形,如下图所示:
![SVG正五边形和正六边形](https://img-blog.csdnimg.cn/2021092521215123.svg)
使用svg画一个小正方形
好的,以下是使用SVG画一个小正方形的代码:
```html
<svg width="50" height="50">
<rect x="10" y="10" width="30" height="30" fill="blue" />
</svg>
```
这个代码会在SVG区域内画一个边长为30的蓝色正方形,左上角坐标为(10, 10)。你可以根据需要修改正方形的大小和颜色。