Learning Path
浏览 SVG 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
22
SVG 教程 SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。 SVG 图形是可伸缩的，无需分辨率依赖，这意味着它们可以在不失真的情况下被放大或缩小。SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。 SVG 的..
SVG 圆形 <circle> SVG 中的 <circle> 元素用于绘制圆形，它是SVG中常用的基本形状之一。使用 <circle> 元素可以创建圆形的图形，并可以通过设置属性来控制圆形的位置、大小和样式。 基本语法 cy='y-coordinate' r='radius' ..
SVG 椭圆 <ellipse> SVG 中的 <ellipse> 元素用于绘制椭圆形，它是SVG中常用的基本形状之一。使用 <ellipse> 元素可以创建椭圆形的图形，并可以通过设置属性来控制椭圆的位置、大小和样式。 基本语法 cy='y-coordinate' rx='x-radius'..
SVG 基本语法 SVG 文档由一个或多个 SVG 元素组成，它们定义了图形的内容和属性。 height='200' xmlns='http://www.w3.org/2000/svg' width 和 height 属性定义了SVG画布的宽度和高度。xmlns 属性指定 SVG 文档的 XML 命名空间。 SVG 的基本语法： SVG文档以 <sv..
SVG 实例 在线实例 下面的例子是把 SVG 代码直接嵌入到 HTML 代码中。 几乎所有现代浏览器都支持 SVG（可缩放矢量图形）格式。以下是一些主要浏览器的支持情况： Google Chrome：全面支持SVG，版本从1.0开始。Mozilla Firefox：全面支持SVG，版本从1.5开始。Microsoft Edge：全面支持SVG。Safari：全面支持SVG，版本从3.1开始。Opera：全面支持SVG，版本从9.0..
SVG 模糊效果 SVG 中的模糊效果可以通过 <feGaussianBlur> 元素实现，该元素使用高斯模糊算法来模糊图像。模糊效果可以用于创建柔和的阴影、景深效果、模糊背景等各种视觉效果。 <feGaussianBlur> 元素： <feGaussianBlur> 元素用于对图像进行高斯模糊处理，它有两个主要参数：stdDeviation：指定高..
SVG 阴影 <feOffset> <feOffset> 是 SVG 滤镜中的一个元素，用于在图像上创建一个偏移效果，可以用来创建阴影、轮廓和其他视觉效果。它的作用是将输入图像的每个像素沿着指定的水平和垂直方向移动一定的距离，然后将结果图像作为滤镜效果的输出。 基本语法 dx 属性定义了阴影在水平方向上的偏移量。dy 属性定义了阴影在垂直方向上的偏移量。 以下代码定义了一..
SVG 滤镜 SVG 滤镜是一种强大的图形效果技术，可以用来实现各种视觉效果，例如模糊、阴影、光照等。滤镜可以应用于 SVG 图形元素，例如矩形、圆形、路径等，以及 SVG 文本元素，使它们呈现出不同的外观和效果。 基本语法SVG 滤镜通常使用 <filter> 元素定义，并通过 filter 属性将其应用于目标元素。 滤镜效果SVG 滤镜可以实现多种效..
SVG 渐变 - 线性 SVG 渐变 渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。 SVG 渐变主要有两种类型： 线性渐变 - <linearGradient> 放射性渐变 - <radialGradient> SVG 线性渐变 - <linearGradient> SVG 中的 &l..
SVG 渐变- 放射性 SVG 中的 <radialGradient> 元素用于创建径向渐变，它可以从一个中心点向外扩散形成渐变效果，使图形呈现出环形、放射状等丰富的颜色变化。径向渐变可以应用于填充或描边 SVG 图形元素，为其添加立体感和视觉效果。 基本语法 参数说明： id 属性定义了径向渐变的唯一标识符，用于在SVG图像中引用该渐变。cx 和 cy 属性定义了渐变的中心点坐标。r..
SVG 在 HTML 页面 SVG 文件可通过以下标签嵌入 HTML 文档：<img>、<object> 或者 <iframe>。 SVG 的代码可以直接嵌入到 HTML 页面中，或您可以直接链接到 SVG 文件。 使用 < img> 标签 通过 <img> 标签可以将 SVG 图像作为图..
SVG 简介 SVG，可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维图形的 XML 标记语言。与位图图像不同，SVG 图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SV..
SVG 直线 <line> SVG 中的 <line> 元素用于绘制直线，它是 SVG 中常用的基本形状之一。使用 <line> 元素可以创建两个点之间的直线，并可以通过设置属性来控制直线的位置、长度和样式。 基本语法 y1='y1-coordinate' x2='x2-coordinate'..
SVG 路径 <path> SVG 中的 <path> 元素用于创建路径，它是 SVG 中最强大和最灵活的基本形状之一。使用 <path> 元素可以绘制直线、曲线、弧线等各种复杂的图形，并且可以通过设置路径命令来控制路径的形状和样式。 基本语法 fill='fill-color' stroke=�..
SVG 多边形 <polygon> SVG 中的 <polygon> 元素用于绘制多边形，它是 SVG 中常用的基本形状之一。使用 <polygon> 元素可以创建闭合的多边形，并可以通过设置属性来控制多边形的顶点坐标、填充颜色、边框颜色等。 基本语法 fill='fill-color' ..
SVG 多段 <polyline> SVG 中的 <polyline> 元素用于绘制多段线，它是 SVG 中常用的基本形状之一。与 <polygon> 元素不同， <polyline> 绘制的线条是未封闭的，即起点和终点不会自动连接。使用 <polyline> 元素可以创建多个连接的线段，并可以通..
SVG <rect> SVG（可缩放矢量图形）的 <rect> 元素用于绘制矩形，是 SVG 中常用的基本形状之一，它允许你绘制矩形，并可以通过设置属性来控制矩形的位置、大小、圆角等样式。 基本语法 y='y-coordinate' width='width-value' height='..
SVG 参考手册 SVG 规范中定义了更多的元素和属性。 常见 SVG 属性： id: 元素的唯一标识符。 class: 元素的类名，用于CSS样式。 style: 元素的内联样式。 transform: 应用到元素上的变换。 x, y: 元素的位置。 width, height: 元素的尺寸。 fill: 填充颜色。 stroke: 描边颜色。 stroke-..
SVG Stroke 属性 SVG 中的 stroke 属性用于定义图形元素的描边（边框）颜色，它可以应用于任何具有轮廓的图形元素，如 <rect>、<circle>、<path> 等。 基本语法 属性解析： stroke 属性定义了图形元素的描边颜色，可以使用颜色名称、十六进制颜色值、RGB值、RGBA值等来表示颜色。如果不想显示描边，可以将 str..
SVG 文本 <text> SVG 中的 <text> 元素用于在 SVG 图像中添加文本内容，它允许你在指定的位置显示文本，并可以通过设置属性来控制文本的样式、字体、大小等。 基本语法 y='y-coordinate' font-family='font' font-size=..
SVG VScode 在上一章节中我们已经介绍了 SVG 基本概念及实例，本章节我们将介绍 SVG 代码的编辑器 -- VScode。 VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器，VSCode 开发环境非常简单易用。 安装 VS Code VSCode 安装也很简单，打开官网 https://code.visualstudio.com/，下载软件包，一步步安装即可，安装过程注意..