如何使用svg画一个向上的S型虚线的曲线
时间: 2024-05-03 08:22:33 浏览: 9
以下是使用SVG画一个向上的S型虚线曲线的示例代码:
```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 50 C 30 10, 70 90, 90 50" fill="none" stroke="black" stroke-width="2" stroke-dasharray="5 5"/>
</svg>
```
解释:
- `viewBox="0 0 100 100"`:指定视口大小为100x100。
- `xmlns="http://www.w3.org/2000/svg"`:指定SVG命名空间。
- `M 10 50`:将起始点移动到(10, 50)。
- `C 30 10, 70 90, 90 50`:使用贝塞尔曲线连接起始点和(90, 50),控制点1为(30, 10),控制点2为(70, 90)。
- `fill="none"`:不填充路径。
- `stroke="black"`:路径线条颜色为黑色。
- `stroke-width="2"`:路径线条宽度为2。
- `stroke-dasharray="5 5"`:路径为虚线,每个实线段长度为5,每个虚线段长度为5。
这样就可以得到一个向上的S型虚线曲线。可以通过调整`viewBox`和路径的坐标和参数来调整曲线的大小和形状。
相关问题
使用svg画一个小正方形
好的,以下是使用SVG画一个小正方形的代码:
```html
<svg width="50" height="50">
<rect x="10" y="10" width="30" height="30" fill="blue" />
</svg>
```
这个代码会在SVG区域内画一个边长为30的蓝色正方形,左上角坐标为(10, 10)。你可以根据需要修改正方形的大小和颜色。
如何使用svg画一个正六边形
可以使用 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 中心,可以按比例计算出顶点坐标。