SVG的基础知识有哪些？

图形开发canvashtml5

SVG（Scalable Vector Graphics）是一种基于XML标记语言的图像格式，用于描述二维矢量图形。它允许你创建和保存包含文本、线条、形状、图像和渐变等元素的图形，并且这些图形可以任意缩放而不会损失质量。以下是SVG的一些基础知识，并通过一个HTML文件给出示例说明。

SVG基础知识

  1. SVG文件结构：

    • SVG文件通常以<svg>标签作为根元素。
    • 可以在<svg>标签内添加各种形状、文本、路径等子元素。

  2. 基本形状：

    • <rect>：矩形。
    • <circle>：圆形。
    • <ellipse>：椭圆。
    • <line>：直线。
    • <polyline>：折线（由多个点组成）。
    • <polygon>：多边形（闭合的折线）。
    • <path>：路径（可以创建任意形状的复杂曲线）。

  3. 文本：

    • 使用<text>元素来添加文本。
    • 可以设置文本的字体、大小、颜色和对齐方式等属性。

  4. 样式和属性：

    • 可以使用内联样式（直接在元素上设置style属性）或外部样式表来定义样式。
    • SVG支持CSS和某些特定的SVG属性（如fill、stroke、stroke-width等）来设置颜色和边框等样式。

  5. 渐变和图案：

    • 使用<linearGradient>和<radialGradient>来定义线性渐变和径向渐变。
    • 使用<pattern>来定义重复的图案。

  6. 变换：

    • 可以使用transform属性来对SVG元素进行平移、旋转、缩放、倾斜等变换。

  7. 交互性：

    • SVG支持事件监听和脚本（如JavaScript），可以创建交互式图形。

示例HTML文件

以下是一个简单的HTML文件示例，展示了SVG的基本使用：
运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG基础知识示例</title>
    <style>
        svg {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>SVG基础知识示例</h1>
    <svg width="400" height="400" viewBox="0 0 400 400">
        <!-- 矩形 -->
        <rect x="10" y="10" width="100" height="50" fill="blue" stroke="black" stroke-width="2"/>
        
        <!-- 圆形 -->
        <circle cx="200" cy="100" r="50" fill="green" stroke="black" stroke-width="2"/>
        
        <!-- 椭圆 -->
        <ellipse cx="300" cy="200" rx="60" ry="30" fill="red" stroke="black" stroke-width="2"/>
        
        <!-- 路径 -->
        <path d="M50,300 Q150,100 250,300 T350,300" fill="none" stroke="brown" stroke-width="2"/>
        
       
    </svg>
</body>
</html>

尝试一下 »

解释

  • <svg>：定义了SVG图形的根元素，width和height属性指定了SVG画布的尺寸，viewBox属性定义了SVG的内部坐标系统。
  • <rect>：创建了一个矩形，x和y属性指定了矩形的左上角位置，width和height属性指定了矩形的宽度和高度，fill属性设置了填充颜色，stroke和stroke-width属性设置了边框的颜色和宽度。
  • <circle>：创建了一个圆形，cx和cy属性指定了圆心的位置，r属性指定了圆的半径。
  • <ellipse>：创建了一个椭圆，cx和cy属性指定了椭圆中心的位置，rx和ry属性指定了椭圆在x轴和y轴上的半径。
  • <polygon>：创建了一个多边形，points属性指定了多边形的顶点坐标。
  • <path>：创建了一条路径，d属性包含了描述路径的命令和参数（如M表示移动到某个点，Q表示二次贝塞尔曲线，T表示平滑的二次贝塞尔曲线等）。
    通过这个示例，你可以了解到SVG的基本元素和属性，并尝试在HTML文件中使用它们来创建矢量图形。

上一篇：SVG文件内容包含哪些元素或信息？

下一篇：在Canvas画布上如何利用三次贝塞尔曲线绘制出漂亮的花瓣？