阅读量:0
SVG（可缩放矢量图形）是一种基于XML的图像格式，用于在网页中绘制二维图形。它支持基本形状、路径、文本等元素，并具有丰富的样式和动画功能。
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
基本形状
SVG（可缩放矢量图形）提供了多种基本形状，这些元素可以直接使用，比canvas更加方便，以下是一些常见的基本形状及其使用说明：
1、矩形<rect> 元素
属性：
x: 矩形左上角的 x 坐标。
y: 矩形左上角的 y 坐标。
width: 矩形的宽度。
height: 矩形的高度。
rx: 实现圆角效果时，圆角沿 x 轴的半径。
ry: 实现圆角效果时，圆角沿 y 轴的半径。
示例代码：
```html
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" strokewidth="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" strokewidth="5"/>
```
2、圆形<circle> 元素
属性：
cx: 圆心坐标 x 值。
cy: 圆心坐标 y 值。
r: 圆的半径。
示例代码：
```html
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" strokewidth="5"/>
```
3、椭圆<ellipse> 元素
属性：
cx: 椭圆中心坐标 x 值。
cy: 椭圆中心坐标 y 值。
rx: 半长轴 (x 半径)。
ry: 半短轴 (y 半径)。
示例代码：
```html
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" strokewidth="5"/>
```
4、直线<line> 元素
属性：
x1: 起点 x 坐标。
y1: 起点 y 坐标。
x2: 终点 x 坐标。
y2: 终点 y 坐标。
示例代码：
```html
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" strokewidth="5"/>
```
5、折线<polyline> 元素
属性：
points: 一系列的点，用空格、逗号或换行符分隔开，每个点由两个数字表示其 x 和 y 坐标。
示例代码：
```html
<polyline points="60,110 65,120 70,115 75,130 80,125 85,140 90,135 95,150 100,145" stroke="orange" fill="transparent" strokewidth="5"/>
```
6、多边形<polygon> 元素
属性：
points: 一系列的点，用空格、逗号或换行符分隔开，每个点由两个数字表示其 x 和 y 坐标，最后一个点会与第一个点相连，形成闭合图形。
示例代码：
```html
<polygon points="50,160 55,180 70,180 60,190 65,205 50,195 35,205 40,190 30,180 45,180" stroke="green" fill="transparent" strokewidth="5"/>
```
7、路径<path> 元素
属性：
d: 一系列绘制指令和参数，包括绝对坐标指令 (大写字母) 和相对坐标指令 (小写字母)。
M: 移动到指定点。
L: 从当前点绘制线段到指定点。
H: 从当前点绘制水平线段到指定 x 坐标。
V: 从当前点绘制垂直线段到指定 y 坐标。
A: 绘制圆弧。
C: 绘制三次贝塞尔曲线。
S: 绘制简化版的三次贝塞尔曲线。
Q: 绘制二次贝塞尔曲线。
T: 绘制简化版的二次贝塞尔曲线。
Z: 绘制闭合图形。
示例代码：
```html
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" strokewidth="5"/>
```
表格归纳
| 形状 | 元素名称 | 主要属性 | 示例代码 |
| 矩形 | | x, y, width, height, rx, ry | |
| 圆形 | | cx, cy, r | |
| 椭圆 | | cx, cy, rx, ry | |
| 直线 | | x1, y1, x2, y2 | |
| 折线 | | points | |
| 多边形 | | points | |
| 路径 | | d | |
FAQs（常见问题解答）
1、如何在SVG中实现渐变填充？
答：在SVG中，可以使用<linearGradient>或<radialGradient>元素来定义渐变，并使用fill属性将渐变应用到图形上。
```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stopcolor:rgb(255,255,0); stopopacity:1" />
<stop offset="100%" style="stopcolor:rgb(255,0,0); stopopacity:1" />
</linearGradient>
</defs>
<rect x="10" y="10" width="30" height="30" fill="url(#grad1)" />
</svg>
```
2、如何设置SVG图形的描边样式？
答：可以通过设置stroke属性来定义描边颜色，通过strokewidth属性来定义描边宽度，通过strokedasharray属性来定义虚线样式等。
```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="110" x2="190" y2="110" stroke="green" strokewidth="5" strokedasharray="5,5" />
</svg>
```
HTML5 SVG 2D入门2—图形绘制(基本形状)介绍及使用
SVG（可缩放矢量图形）是一种基于可扩展标记语言的图形存储格式，它允许用户创建和嵌入矢量图形到网页中，SVG 2D图形绘制是SVG技术的一个重要组成部分，通过SVG可以绘制各种基本形状，如矩形、圆形、椭圆、多边形等。
基本形状介绍
1. 矩形（rect）
矩形是SVG中最基本的形状之一，用于绘制矩形或正方形。
属性：
x：矩形左上角点的x坐标。
y：矩形左上角点的y坐标。
width：矩形的宽度。
height：矩形的高度。
rx：矩形的x轴半径，用于创建圆角矩形。
ry：矩形的y轴半径，用于创建圆角矩形。
示例：
<svg width="200" height="200"> <rect x="10" y="10" width="100" height="100" fill="blue" /> </svg>
2. 圆形（circle）
圆形用于绘制圆形或椭圆形。
属性：
cx：圆心点的x坐标。
cy：圆心点的y坐标。
r：圆的半径。
示例：
<svg width="200" height="200"> <circle cx="50" cy="50" r="40" fill="red" /> </svg>
3. 椭圆（ellipse）
椭圆用于绘制椭圆形。
属性：
cx：椭圆中心点的x坐标。
cy：椭圆中心点的y坐标。
rx：椭圆的x轴半径。
ry：椭圆的y轴半径。
示例：
<svg width="200" height="200"> <ellipse cx="100" cy="100" rx="50" ry="25" fill="green" /> </svg>
4. 多边形（polygon）
多边形由直线段组成，可以绘制任意多边形。
属性：
points：一个包含多边形顶点坐标的字符串，坐标之间用空格分隔。
示例：
<svg width="200" height="200"> <polygon points="50,100 100,50 150,100" fill="purple" /> </svg>
使用技巧
使用fill属性可以给图形填充颜色。
使用stroke属性可以给图形添加边框，并设置边框颜色和宽度。
使用strokewidth属性可以单独设置边框宽度。
可以通过strokelinecap和strokelinejoin属性来设置边框的端点和连接方式。
通过SVG可以轻松地绘制各种基本形状，这使得SVG在网页图形设计、图表制作等领域有着广泛的应用，掌握SVG基本形状的绘制方法对于深入学习SVG技术至关重要。
