前端 【HTML5】svg 绘制图形

文章目录

一、基本介绍二、用法详解2.1、矩形（rect）2.2、圆形（circle）2.3、椭圆（ellipse）2.4、线条（line）2.5、折线（polyline）2.6、多边形（polygon）2.7、路径（path）

一、基本介绍

什么是 SVG？

1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

2. SVG 用于定义用于网络的基于矢量的图形

3. SVG 使用 XML 格式定义图形

4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

5. SVG 是万维网联盟的标准

SVG 的优势，与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

1. SVG 图像可通过文本编辑器来创建和修改

2. SVG 图像可被搜索、索引、脚本化或压缩

3. SVG 是可伸缩的

4. SVG 图像可在任何的分辨率下被高质量地打印

5. SVG 可在图像质量不下降的情况下被放大

基本用法：

属性描述xmlns定义 SVG 命名空间version定义所使用的 SVG 版本width设置此 SVG 文档的宽度height设置此 SVG 文档的高度

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

二、用法详解

图形的 style 属性

属性描述fill定义图形的填充颜色stroke-width定义图形边框的宽度stroke定义图形边框的颜色fill-opacity定义填充颜色透明度（合法的范围是：0 - 1）stroke-opacity定义笔触颜色的透明度（合法的范围是：0 - 1）opacity定义整个元素的透明值

2.1、矩形（rect）

标签可用来创建矩形，以及矩形的变种。

属性描述width定义矩形的宽度height定义矩形的高度style定义 CSS 属性x定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）y定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）rx 和 ry可使矩形产生圆角

使用 style 属性：

style="fill:red; stroke:black; stroke-width:5; opacity:0.5"/>

2.2、圆形（circle）

标签可用来创建一个圆（如果省略 cx 和 cy，圆的中心会被设置为 (0, 0) ）

属性描述r定义圆的半径cx圆点的 x 坐标cy圆点的 y 坐标

使用 style 属性：

2.3、椭圆（ellipse）

标签可用来创建椭圆。

属性描述rx定义水平半径ry定义垂直半径cx圆点的 x 坐标cy圆点的 y 坐标

使用 style 属性：使用方法同上

2.4、线条（line）

标签用来创建线条。

属性描述x1在 x 轴定义线条的开始y1在 y 轴定义线条的开始x2在 x 轴定义线条的结束y2在 y 轴定义线条的结束

2.5、折线（polyline）

标签用来创建仅包含直线的形状。

属性描述points定义折线每个折点的 x 和 y 坐标

2.6、多边形（polygon）

标签用来创建含有不少于三个边的图形。

属性描述points定义多边形每个角的 x 和 y 坐标

2.7、路径（path）

标签用来定义路径。以下所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

命令描述中文Mmoveto移动Llineto画线Hhorizontal lineto横画线Vvertical lineto垂直画线Ccurveto曲线Ssmooth curveto光滑曲线Qquadratic Belzier curve二次贝塞尔曲线Tsmooth quadratic Belzier curveto二次贝塞尔光滑曲线Aelliptical Arc椭圆弧Zclosepath结束绘制路径

定义了一条路径，它开始于位置 25 15，到达位置 15 35，然后从那里开始到 35 35，最后在 25 15 关闭路径。

绘制一个螺旋：

好文阅读

 您阅读本篇文章共花了：