使用svg 绘制一条曲线
时间: 2024-02-16 13:52:19 浏览: 30
可以使用 SVG 的 `path` 元素来绘制一条曲线。下面是一个例子:
```html
<svg width="200" height="200">
<path d="M 20,100 Q 100,20 180,100" fill="none" stroke="black" />
</svg>
```
这个例子会在一个 200x200 的 SVG 画布上绘制一条从 (20, 100) 开始,以 (100, 20) 为控制点,到 (180, 100) 结束的二次贝塞尔曲线。
其中 `d` 属性描述了路径,它的值是一系列的命令和参数,用空格分隔。`M` 命令表示将画笔移动到指定位置,`Q` 命令表示绘制一个二次贝塞尔曲线,后面跟着两个点,第一个是控制点,第二个是终点。
最后两个属性是用来设置线条的颜色和样式的。
你也可以参考这个在线 SVG 路径编辑器:https://www.designer.io/en/tools/svg-path-editor/
相关问题
HTML svg 贝塞尔曲线 详细教程
SVG 是一种用于创建矢量图形的语言,其中包含了一些绘制基本图形的元素(如线段、矩形、圆形等),也支持使用贝塞尔曲线绘制更复杂的图形。下面我将介绍如何在 SVG 中使用贝塞尔曲线。
贝塞尔曲线是一种数学曲线,其形状由一组控制点决定。在 SVG 中,我们可以使用 path 元素来绘制贝塞尔曲线。path 元素的 d 属性表示路径,其中包含了一系列子命令,每个子命令代表了一条线段或一条曲线。
下面是一个简单的贝塞尔曲线的示例:
```html
<svg width="100" height="100">
<path d="M 20 80 Q 50 20, 80 80" stroke="black" fill="none"/>
</svg>
```
这个示例绘制了一条起点为 (20, 80),结束点为 (80, 80) 的曲线,并且控制点为 (50, 20)。其中,M 表示移动到指定点,Q 表示绘制二次贝塞尔曲线,stroke 表示线条颜色,fill 表示填充颜色。
如果你想要绘制更复杂的曲线,可以使用更多的子命令,比如 C 表示绘制三次贝塞尔曲线。下面是一个绘制心形的示例:
```html
<svg width="100" height="100">
<path d="M 50 10
C 60 10, 70 20, 70 30
C 70 50, 50 70, 30 90
C 10 70, 10 50, 30 30
C 40 20, 50 10, 50 10" stroke="red" fill="none"/>
</svg>
```
这个示例绘制了一个心形,其中 C 表示绘制三次贝塞尔曲线,stroke 表示线条颜色,fill 表示填充颜色。
希望这个简单的教程能够帮助你开始使用 SVG 绘制贝塞尔曲线。如果你需要更深入的学习,可以参考 SVG 的官方文档。
用svg画一个山水背景
以下是一个使用SVG绘制的山水背景的代码示例:
```HTML
<svg viewBox="0 0 100 100" style="background-color: #9AC8EB;">
<!-- 山 -->
<path d="M0,80 Q30,60 50,70 Q70,80 100,60 V100 H0 Z" fill="#5E8A8C"/>
<path d="M0,80 Q30,60 50,70 Q70,80 100,60" fill="none" stroke="#5E8A8C" stroke-width="2"/>
<!-- 水 -->
<rect x="0" y="70" width="100" height="30" fill="#9AC8EB"/>
<rect x="0" y="70" width="100" height="5" fill="url(#water-pattern)"/>
<defs>
<pattern id="water-pattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0,5 Q5,0 10,5 Q15,10 20,5 Q25,0 30,5 Q35,10 40,5 Q45,0 50,5 Q55,10 60,5 Q65,0 70,5 Q75,10 80,5 Q85,0 90,5 Q95,10 100,5" fill="#5E8A8C"/>
</pattern>
</defs>
</svg>
```
代码解释:
- `viewBox` 属性定义了SVG视口的大小和位置,`background-color` 样式设置了SVG的背景颜色为淡蓝色。
- `path` 标签绘制了一座山,`d` 属性定义了山的形状,该路径由两个二次贝塞尔曲线和一条直线组成,`fill` 属性设置为 `#5E8A8C` 表示填充颜色为深绿色,`stroke` 属性设置为 `#5E8A8C` 表示边框颜色为深绿色,`stroke-width` 属性设置为 `2` 表示边框宽度为2个像素。
- `rect` 标签绘制了一条水,`x`、`y`、`width` 和 `height` 属性定义了水的位置和大小,`fill` 属性设置为 `#9AC8EB` 表示填充颜色为淡蓝色。
- 使用 `defs` 和 `pattern` 标签定义了一段水的纹理,`path` 标签定义了纹理的形状,使用 `fill` 属性填充颜色为深绿色,然后将该纹理应用于水的填充中。
运行上述代码,将会在浏览器中显示一个山水背景,如下图所示:
![SVG山水背景](https://img-blog.csdnimg.cn/20210925203904987.svg)
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)