引言
SVG基础知识
SVG：可缩放矢量图形，基于xml标记语言，用于描述矢量图
svg基础元素
svg
创建svg画布
width和height属性定义了SVG画布的宽度和高度。xmlns属性指定 SVG 文档的 XML 命名空间。
<svg
width="200" <!-- 指定SVG画布的宽度 -->
height="200" <!-- 指定SVG画布的高度 -->
xmlns="http://www.w3.org/2000/svg"> <!-- 指定SVG命名空间 -->
<!-- SVG图形内容 -->
</svg>
circle
用来创建圆，基于一个圆心和一个半径
专属属性
cx属性定义一个中心点的 x 轴坐标。cy属性定义一个中心点的 y 轴坐标。r属性用来定义圆的半径。
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" />
</svg>
polyline
用来创建一系列直线连接多个点
专属属性
points属性定义了用来画一个<polyline>元素或画一个<polygon>元素的点的数列
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<!-- 具有默认填充的折线示例 -->
<polyline points="0,100 50,25 50,75 100,0" />
<!-- 具有描边但无填充的相同的多段线形状示例 -->
<polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
SVG 其他基本形状
-
矩形（
<rect>）- 用于绘制矩形或方形。
- 属性：
x、y、width、height、rx（圆角半径）等。
<svg width="500" height="500" > <!-- 不带圆角 --> <rect width="100" height="100" /> <!-- 圆角 --> <rect x="120" width="100" height="100" rx="15" /> </svg> -
椭圆（
<ellipse>）- 用于绘制椭圆形。
- 属性：
cx、cy、rx（x 轴半径）、ry（y 轴半径）。
<svg width="100" height="100"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> -
多边形（
<polygon>）- 用于绘制闭合的多边形。
- 属性：
points（定义顶点）。
<svg width="100" height="100"> <!-- 具有默认填充的多边形示例 --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- 具有描边但无填充的相同的多边形形状示例 --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg>
常用属性
id唯一标识width元素宽度height元素高度class元素类名style设置行内样式fill填充颜色stroke描边颜色stroke-width描边宽度stroke-linecap设置路径两端的形状stroke-linejoin设置路径转角的形状transform应用到元素上的变换opacity设置透明度
