svg-从入门到高级
关注
分享
扫一扫
svg-从入门到高级
紫微前端
打造前端的百科全书
展开
-
1.SVG概述
SVG是什么SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的、基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体历史版本SVG 1.0 在2001年9月份成为 W3C Recommendation（即W3C推荐标准）。 SVG 1.1 在2003年1月份成为 W3C Reco原创 2022-03-28 10:51:13 · 1617 阅读 · 0 评论 -
2.SVG图像的一个简单例子
SVG 使用 XML 编写：<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="//www.w3.org/2000/svg"><circ原创 2022-03-28 10:52:22 · 251 阅读 · 0 评论 -
3.SVG 用在HTML中
在HTML4的规范中，SVG文件可通过以下标签嵌入HTML文档：<embed>、<object> 或者 <iframe>。而HTML5直接支持SVG内嵌。<html> <!DOCTYPE html><body><h1>My first SVG</h1><svg width="100" height="100"> <circle cx="50" cy="50" r="40"原创 2022-03-28 10:53:06 · 797 阅读 · 0 评论 -
4.SVG 矩形（rect）
SVG 形状（Shapes）就像画板应用一样，SVG为开发者提供了一些预定义的形状元素，以便于快速应用：方形 <rect> 圆形 <circle> 椭圆 <ellipse> 线条 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>后续章节我们将逐个介绍这些图形元素，先从方形及其一些变体开始。 由于SVG代码可读性较高，我们就使用实例代码结合代码解释的方式来学习。原创 2022-03-28 10:55:48 · 3177 阅读 · 0 评论 -
5.预定义的形状元素 - 圆形
circle 标签代码如下：<svg height="200" width="200"> <circle cx="100" cy="100" r="60" stroke="#c00" stroke-width="3" fill="#090" /></svg>代码解释如下：cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0) r 属性定义圆的半径...原创 2022-03-28 10:56:37 · 303 阅读 · 0 评论 -
6.预定义的形状元素 - 椭圆
ellipse 标签例子1代码如下：<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:orange;stroke:purple;stroke-width:2" /></svg>代码解释如下：cx 属性定义圆点的 x 坐标 cy 属性定义圆点的 y 坐标 rx 属性定义水平半径 ry 属性定义垂直半径例子2 - 叠原创 2022-03-28 10:57:39 · 192 阅读 · 0 评论 -
7.预定义的形状元素 - 直线
line 标签代码如下：<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" /></svg>代码解释如下：x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束...原创 2022-03-28 10:58:29 · 159 阅读 · 0 评论 -
8.预定义的形状元素 - 折线
polyline 标签例子1 - 下坡线代码如下：<svg height="200" width="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:red;stroke-width:3" /></svg>代码解释如下：points 属性定义了折线的起点、转折点和终点位置 每个连接点的位置以 x,y 的格式定义原创 2022-03-28 10:59:36 · 230 阅读 · 0 评论 -
9.预定义的形状元素 - 多边形
polygon 标签polygon 标签用来创建至少3条边的图形。闭合的折线（polyline）可以构成一个多边形。Polygon一词源自希腊，“Poly”代表“多个”，“gon”代表“角”，合起来就是具备多个顶点的几何形状。例子1 - 三角形代码如下：<svg height="210" width="500"> <polygon points="200,10 250,190 160,150" style="fill:lime;stroke:purple;st原创 2022-03-28 11:01:19 · 476 阅读 · 0 评论 -
10.SVG 路径前面提到的各种形状，其轮廓线都属于路径
SVG中的路径概念可以是一个形状的外框，也可以是用来裁剪的线条，这个线条可以被描边，封闭时还可以被填充。路径和折线或多边形不同之处在于，路径可以是直线也可以曲线，因此使用路径可以构造更为复杂的几何图形。我们可以把路径看成是手工绘图的笔迹，可以用点的集合和绘制方式（如线段或圆弧）来描述。path 标签path 标签用来创建一条路径，路径元素的基本属性是路径数据，用d='path data'语法来定义。路径数据中包含了点集和绘制指令。点集就是一组“x y”格式的坐标，以空格隔开，以指令字..原创 2022-03-28 11:04:01 · 908 阅读 · 0 评论 -
11.和位图不同，SVG中的文本是独立对象
传统图像中的文本实际上是已经栅格（像素）化为了点阵图，并不再具备文本的特性。 而SVG图像中的文本由于是独立对象存在，要灵活得多，可以实现更多的图文交互效果，而且可以被搜索引擎所索引。 不过SVG文本不能自动换行，不适合用来描述大段动态文本，这是一个缺点。text 标签text 标签用来创建SVG文本元素。例子1 - 简单文本和变换代码如下：<svg height="30" width="200"> <text x="0" y="15" fill="red">原创 2022-03-28 11:07:07 · 209 阅读 · 0 评论 -
12.定义线条的样式
SVG 提供了很多描边（stroke）属性，一些常用的有如下几个：stroke stroke-width stroke-linecap stroke-linejoin stroke-dasharray所有这些属性可以被应用在任意线条、文本以及元素外框上。SVG stroke 属性<stroke>属性用来定义线条、文本或元素轮廓（outline）的颜色。SVG stroke-width 属性<stroke-width>属性用来定义线条、文本或元素轮廓的..原创 2022-03-28 11:08:48 · 1007 阅读 · 0 评论 -
13.SVG过滤器用来给SVG图形添加特效
SVG 过滤器元素SVG过滤器（也称为滤镜）用来给SVG图形添加特效，和PS软件中的滤镜效果类似。SVG中可用的过滤器元素包括：<feBlend> - 图片混合 <feColorMatrix> - 颜色变换 <feComponentTransfer> <feComposite> - 图片合成 <feConvolveMatrix> - 卷积变换 <feDiffuseLighting> - 散射光 <feDispl原创 2022-03-28 11:17:00 · 580 阅读 · 0 评论 -
14.高斯模糊用来给图形添加模糊效果
<defs> 和 <filter>所有的SVG过滤器定义在一个<defs>元素中。<defs>元素是definition的简写，用来包含特定元素的定义。<filter> 元素用来定义一个SVG过滤器。<filter> 元素有一个必需的id属性用来唯一标识该过滤器。然后图形通过这个id来应用该过滤器。SVG <feGaussianBlur>实例代码 1 2 3 4 ...原创 2022-03-28 11:17:51 · 362 阅读 · 0 评论 -
15.SVG使用投射偏移结合模糊特性来实现阴影特效
SVG <feOffset>SVG的投影效果和CSS3的drop-shadow属性类似。实例代码1 - 简单投影 1 2 3 4 5 6 7 8 9 <svg height="120" width="120"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"&g...原创 2022-03-28 11:18:46 · 570 阅读 · 0 评论 -
16.SVG线性渐变（Linear Gradient）
SVG 渐变和CSS3一样，SVG也支持渐变，渐变就是从一个颜色到另外一个颜色的平滑过渡，SVG支持单个元素使用多个渐变。渐变方式有两种：线性和径向。SVG 线性渐变 - linearGradient<linearGradient> 元素用来定义一个线性渐变。<linearGradient> 元素必须被包含在一个 <defs> 标签中。如前面所述，<defs> 标签用来包含特殊元素（如滤镜、渐变等）。线性渐变可以被定义为水平、垂直或角度渐变原创 2022-03-28 11:19:37 · 4840 阅读 · 0 评论 -
17.SVG径向渐变（Radial Gradient）
VG 径向渐变 - radialGradient<radialGradient> 元素用来定义一个径向渐变，和前面一样，它也必须包含在 <defs> 定义标签中。实例代码1 - 椭圆 1 2 3 4 5 6 7 8 9 <svg height="150" width="500"> <defs> <radialGradient...原创 2022-03-28 11:20:16 · 936 阅读 · 0 评论