SVG 基本语法

SVG 基本语法

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维图形的语言，基于 XML。它由 W3C 制定，是一种开放的标准。SVG 图形可以在不失真的情况下放大或缩小，因此它们非常适合网页设计、打印图形和高分辨率的屏幕显示。

SVG 文档结构

一个基本的 SVG 文档结构如下所示：

<svg
    width="100%"
    height="100%"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <!-- SVG 内容 -->
</svg>

• width 和 height 属性定义了 SVG 图形的宽度和高度。
• viewBox 属性是一个矩形，定义了 SVG 图形的可视区域。前两个数字是左上角的 x 和 y 坐标，后两个数字是视口的宽度和高度。
• xmlns 属性定义了 SVG 命名空间。

常用的 SVG 元素

1. 矩形 <rect>

<rect x="10" y="10" width="30" height="20" style="fill:blue;stroke:black;stroke-width:2"/>

• x 和 y 属性定义了矩形的左上角坐标。
• width 和 height 属性定义了矩形的宽度和高度。
• style 属性定义了矩形的填充颜色、边框颜色和边框宽度。

2. 圆形 <circle>

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>

• cx 和 cy 属性定义了圆心的 x 和 y 坐标。
• r 属性定义了圆的半径。

3. 椭圆 <ellipse>

<ellipse cx="75" cy="75" rx="20" ry="5" style="fill:yellow;stroke:purple;stroke-width:2"/>

• cx 和 cy 属性定义了椭圆中心的 x 和 y 坐标。
• rx 和 ry 属性定义了椭圆的 x 和 y 轴半径。

4. 直线 <line>

<line x1="10" y1="10" x2="50" y2="50" style="stroke:blue;stroke-width:2"/>

• x1 和 y1 属性定义了直线的起点坐标。
• x2 和 y2 属性定义了直线的终点坐标。

5. 多边形 <polygon>

<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>

• points 属性定义了多边形每个角的 x 和 y 坐标。

6. 路径 <path>

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="black"/>

• d 属性定义了路径的指令。M 表示移动到某个点，H 表示水平线，V 表示垂直线，L 表示直线。

SVG 样式和属性

SVG 元素可以通过 CSS 样式或内联样式进行样式化。以下是一些常用的样式属性：

• fill：定义了形状的填充颜色。
• stroke：定义了形状的边框颜色。
• stroke-width：定义了形状的边框宽度。
• opacity：定义了形状的不透明度。

在网页中使用 SVG

SVG 图形可以直接嵌入 HTML 页面中，也可以作为图片引用。例如：

<!-- 直接嵌入 HTML -->
<svg>
    <!-- SVG 内容 -->
</svg>

<!-- 作为图片引用 -->
<img src="image.svg" alt="SVG Image">

结论

SVG 提供了一种强大且灵活的方式来创建和操作矢量图形。通过掌握基本的 SVG 语法和元素，开发者可以创建出丰富多样的图形和动画效果，以增强网页的视觉效果和用户体验。