SVG（Scalable Vector Graphics）是一种基于XML的图形格式，使用文本定义图形元素，允许用户通过代码创建、修改和操控图形。其基本语法结构与XML文档相似，通过一系列标签来描述图形元素。
目录
SVG文档结构
SVG文档通常由<svg>标签包裹，其他所有图形元素都在这个标签内定义。SVG元素本质上是一个XML文档，因此可以嵌套其他标签，如<circle>, <rect>, <path>, <line>等。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1">
<!-- 图形元素 -->
</svg>
- xmlns：定义SVG的命名空间，通常保持默认。
- width 和 height：定义SVG画布的宽度和高度。
- version：指定SVG版本。
常用的SVG元素
<circle>– 绘制圆形- 定义圆心的坐标（
cx,cy）和半径（r）。 - 示例：
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> - 解释：在坐标(50, 50)处绘制半径为40的红色圆形，黑色边框，边框宽度为3。
- 定义圆心的坐标（
<rect>– 绘制矩形- 定义矩形的左上角坐标（
x,y）、宽度（width）和高度（height）。 - 示例：
<rect x="10" y="10" width="100" height="50" stroke="black" stroke-width="2" fill="green" /> - 解释：绘制一个绿色的矩形，左上角坐标(10, 10)，宽度为100，高度为50，边框黑色，宽度为2。
- 定义矩形的左上角坐标（
<line>– 绘制线段- 定义线段的起点和终点坐标（
x1,y1,x2,y2）。 - 示例：
<line x1="0" y1="0" x2="200" y2="200" stroke="blue" stroke-width="2" /> - 解释：从(0, 0)到(200, 200)绘制一条蓝色线段，边框宽度为2。
- 定义线段的起点和终点坐标（
<path>– 绘制路径- 用
d属性定义路径的具体路径。 - 示例：
<path d="M10 10 H 90 V 90 H 10 Z" stroke="black" fill="transparent"/> - 解释：使用”移动到”（
M）、”水平线”（H）、”垂直线”（V）和”闭合”（Z）命令绘制路径。该路径是一个矩形。
- 用
<text>– 绘制文本- 定义文本内容和位置。
- 示例：
<text x="50" y="50" font-family="Verdana" font-size="35" fill="blue">Hello SVG</text> - 解释：在(50, 50)处绘制蓝色文本“Hello SVG”，字体为Verdana，字体大小为35。
<polygon>– 绘制多边形- 通过
points属性定义顶点坐标。 - 示例：
<polygon points="200,10 250,190 160,210" stroke="black" fill="yellow"/> - 解释：绘制一个黄色的三角形，三个顶点分别在(200, 10), (250, 190), (160, 210)处，边框为黑色。
- 通过
SVG的属性
fill：定义图形的填充颜色。- 例如：
fill="red"。
- 例如：
stroke：定义图形的边框颜色。- 例如：
stroke="black"。
- 例如：
stroke-width：定义边框的宽度。- 例如：
stroke-width="2"。
- 例如：
opacity：设置透明度，值范围为0（完全透明）到1（完全不透明）。- 例如：
opacity="0.5"。
- 例如：
transform：对图形进行变换，例如旋转、平移、缩放等。- 例如：
transform="rotate(45)"旋转45度。
- 例如：
d：路径元素的属性，定义路径的具体绘制指令。- 例如：
d="M10 10 L20 20 L30 10 Z"。
- 例如：
viewBox：定义图形的可视区域，适用于响应式设计。- 例如：
viewBox="0 0 100 100"。
- 例如：
基本绘图操作
- 绘制简单图形 通过组合
<circle>,<rect>,<line>,<path>等元素，可以快速绘制出各种基本图形。 - 图形变换 使用
transform属性，可以对图形进行旋转、缩放、平移等变换操作。<circle cx="50" cy="50" r="40" transform="rotate(45)" /> - 组合多个图形 你可以将多个SVG元素组合在一起，形成复杂的图形。例如：
<svg width="200" height="200"> <rect x="10" y="10" width="100" height="100" fill="green" /> <circle cx="150" cy="50" r="40" fill="blue" /> </svg>
参考资料
出站链接
SVG提供了一种强大的方式来创建可缩放、响应式的图形，可以在各种设备和分辨率下保持清晰。通过掌握基本语法，你可以在Web页面中灵活运用SVG，提升用户体验和视觉效果。
发表回复