SVG 急速入门教程和实用案例

📚教程简介 本教程涵盖了 SVG 所有基础且常用的知识点，用精炼的逻辑、丰富的代码示例和丰富的实用案例，让您快速入门 SVG 并学有所用。 🎓你会学到什么 SVG 基本概念和如何使用 SVG； SVG

上一篇：教程介绍 1. SVG 是什么？ SVG 全称是: Scalable Vector Graphics, 中文名是: 可缩放矢量图形，本质上就是用 XML 标记语言把线、形状、颜色等组合为一个图

上一篇：SVG 是什么？ 前面了解了 SVG 本质上就是 XML 代码，那这些代码放在哪里运行呢？ 1. SVG 作为图片使用 1.1. <img> SVG 可以像 png，jpg 文件一样被 <im

上一篇：如何使用 SVG ？ 从本节开始，我们正式讲解如何绘制 SVG。 1. 基础和自定义形状 SVG 有2种创建形状（shape）的方式： 一种是使用预定义的基础形状（<line>、<rect>、

上一篇：基础形状（Basic Shapes） 本节我们讲解 3 种自定义图形： <path> 可以绘制任意的形状和曲线； <polyline> 绘制折线； <polygon> 绘制多边形。 1. 路径

上一篇：自定义形状（Custom Shapes） 本节我们介绍如何使用 <text> <tspan> <textPath> 元素绘制文本。 1. <text> (x,y) 第一个字的基线坐标 fill

上一篇：绘制文本 本节我们介绍如何使用 <image> 元素绘制图片。 1. <image> <image> 用于绘制光栅图片或其他 SVG 矢量图。 href 图片的 URL x y 图片左上角坐标

上一篇：绘制图片 本节我们介绍如何使用 <foreignObject> 在 SVG 里绘制普通的 HTML 内容。 1. <foreignObject> <foreignObject> 元素允许包含来

上一篇：绘制 HTML 本节我们讲解 SVG 视口和用户空间的概念。 1. 什么是 SVG 视口和用户空间？ 上图中： 整个淡黄色的区域是假想的无限大的 SVG 画布，SVG 可以在任意地方绘制任意图

上一篇：SVG 视口和用户空间 <view> 元素用于显示同一个 svg 图形的不同区域。 1. 基本语法 <view> 内嵌于 <svg> 中； id 用于引用此 <view>； viewBox 定

上一篇：view 元素 SVG 的许多元素都支持 transform 属性，用于坐标偏移(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)等。 1. 缩放(scale)

SVG 也支持代码结构化、代码复用等。 本节我们介绍如何使用 `<defs>` `<g>` `<use>` 元素实现代码复用。

什么是 SVG？ SVG 全称是: Scalable Vector Graphics, 中文名是: 可缩放矢量图形。 霓虹光圈效果。

上一篇文章中我们用 SVG 实现了霓虹光圈特效，本篇文章实现大屏可视化项目中常用的大屏页头。 涉及的相关知识点<path><ellipse><linearGradient>等

前言 上一篇文章中我们用 SVG 实现了大屏页头特效，本篇文章实现酷炫的驾驶舱页面。 驾驶舱预览 实现说明 此特效把许多基础的 SVG 知识运用起来，组成了复杂的效果。 实现步骤： 使用 Adobe

前言 上一篇文章中我们用 SVG 实现了驾驶舱页面，本篇文章实现大屏可视化项目中常用的组件边框。 组件边框预览 实现说明 实现步骤： 使用 Adobe Illustrator 等 SVG 作图软件，绘