SVG 简介
SVG 指可伸缩矢量图形；
SVG 用来定义网络的基于矢量的图形；
SVG 使用 XML 格式定义图形；
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失；
SVG 是万维网联盟的标准；
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体；
SVG 的应用
图表视图 (echart)、地图视图 (WEB-GIS)；
形象 (AI) 的全网应用；
UI 产品的设计；
SVG 动画；
SVG 与 Canvas 区别
| canvas | SVG | |
|---|---|---|
历史 |
较新，由 apple 私有技术发展而来 | 2003 年称为 W3C 标准 |
功能 |
功能简单，2D 绘制 API ，WEBGL 等 3D 技术 | 功能丰富，各种图形，滤镜，动画等 |
特点 |
像素，只能脚本驱动 | 矢量，XML ，CSS ，元素操作 |
支持 |
主流浏览器，IE9+ | 主流浏览器，IE9+ ，其他 SVG 阅读器 |
操作对象 |
基于像素（动态点阵图） | 基于图形元素 |
元素 |
单个 HTML 元素 | 多种图形元素 |
驱动 |
只能脚本驱动 | 支持脚本和 CSS |
事件交互 |
用户交互到像素点 | 用户交互到图形元素 |
性能 |
适合小面积，大数量的应用场景 | 适合大面积，小数量的应用场景 |
动画 |
数据驱动 | DOM 驱动 |
SVG 形状
作用于 svg 标签的属性
viewport：表示 SVG 的可见区域的大小：width、height 控制 svg 的宽度和高度；
viewBox：定义用户视野的位置以及大小，即定义用来观察 SVG 视图一个矩形区域（更形象的解释就是：SVG 就像是显示器屏幕，viewBox 就是截屏工具选中的那个框）
矩形 rect
-
属性
- rect 元素的 width 和 height 属性：可定义矩形的高度和宽度
- x 属性：定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
- y 属性：定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
- rx 和 ry 属性：可使矩形产生圆角
- CSS 的 fill 属性：定义填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 fill-opacity 属性：定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke 属性：定义边框的颜色
- CSS 的 stroke-width 属性：定义边框的宽度
- CSS 的 stroke-opacity 属性：定义笔触颜色的透明度（合法的范围是：0 - 1）
-
示例代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red; stroke:black; stroke-width:5; opacity:0.5;"/> </svg> -
效果展示
圆形 circle
-
属性
- cx 和 cy 属性定义圆点的 x 和 y 坐标，如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
- r 属性定义圆的半径
- CSS 的 fill 属性：定义填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 fill-opacity 属性：定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke 属性：定义边框的颜色
- CSS 的 stroke-width 属性：定义边框的宽度
- CSS 的 stroke-opacity 属性：定义笔触颜色的透明度（合法的范围是：0 - 1）
-
示例代码
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1"> <circle cx="100" cy="80" r="60" style="fill:red; stroke:black; stroke-width:5; opacity:0.5;"/> </svg> -
效果展示
椭圆 ellipse
-
属性
- cx 属性定义圆点的 x 坐标
- cy 属性定义圆点的 y 坐标
- rx 属性定义水平半径
- ry 属性定义垂直半径
- CSS 的 fill 属性：定义填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 fill-opacity 属性：定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke 属性：定义边框的颜色
- CSS 的 stroke-width 属性：定义边框的宽度
- CSS 的 stroke-opacity 属性：定义笔触颜色的透明度（合法的范围是：0 - 1）
-
示例代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="240" cy="70" rx="220" ry="30" style="fill:yellow"></ellipse> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:white"></ellipse> </svg> -
效果展示
线 line
-
属性
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
- CSS 的 fill 属性：定义填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 fill-opacity 属性：定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke 属性：定义边框的颜色
- CSS 的 stroke-width 属性：定义边框的宽度
- CSS 的 stroke-opacity 属性：定义笔触颜色的透明度（合法的范围是：0 - 1）
-
示例代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="20" y1="20" x2="300" y2="250" style="stroke:rgb(99,99,99);stroke-width:2"/> </svg> -
效果展示
折线 polyline
-
属性
- points 属性定义多边形每个角的 x 和 y 坐标，并用逗号或者空格分隔
- CSS 的 fill 属性：定义填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 fill-opacity 属性：定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke 属性：定义边框的颜色
- CSS 的 stroke-width 属性：定义边框的宽度
- CSS 的 stroke-opacity 属性：定义笔触颜色的透明度（合法的范围是：0 - 1）
-
示例代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="5 70, 20 70, 25 60, 35 80, 45 60, 55 80, 65 60, 75 80, 80 70, 95 70" style="stroke: black; stroke-width: 3; fill: none;"/> </svg> -
效果展示
多边形 polygon
指定坐标时不需要在最后指定返回起始坐标，因为图形是封闭的，会自动回到起始坐标
-
属性
- points 属性定义多边形每个角的 x 和 y 坐标，并用逗号或者空格分隔
-
示例代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95" style="fill: yellow; fill-opacity: 0.5; stroke: black;stroke-width: 2;"/> </svg> -
效果展示
路径 path
由于绘制路径的复杂性，强烈建议使用SVG编辑器来创建复杂的图形以下所有属性均允许小写字母，大写表示绝对定位，小写表示相对定位；
-
属性
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
- CSS 的 fill 属性：定义填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 fill-opacity 属性：定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke 属性：定义边框的颜色
- CSS 的 stroke-width 属性：定义边框的宽度
- CSS 的 stroke-opacity 属性：定义笔触颜色的透明度（合法的范围是：0 - 1）
-
示例代码
<svg width="100%" height="360px" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> </svg> -
效果展示
SVG 滤镜
SVG 滤镜简介
-
SVG 可用的滤镜是：
- feBlend - 与图像相结合的滤镜
- feColorMatrix - 用于彩色滤光片转换
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - 过滤阴影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight - 用于照明过滤
- fePointLight - 用于照明过滤
- feSpotLight - 用于照明过滤
-
除此之外，可以在每个 SVG 元素上使用多个滤镜！
SVG 高斯滤镜
-
用法
- 必须在
<defs>标签中定义 SVG 滤镜； <filter>标签用来定义 SVG 滤镜，<filter>标签使用必需的 id 属性来定义向图形应用哪个滤镜；<filter>标签必须嵌套在<defs>标签内，<defs>标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义；- 滤镜效果是通过
<feGaussianBlur>标签进行定义的，fe 后缀可用于所有的滤镜
- 必须在
-
示例代码
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="Gaussian_Blur"> <!-- stdDeviation 属性可定义模糊的程度 --> <!-- in="SourceGraphic" 这个部分定义了由整个图像创建效果 --> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <ellipse cx="100" cy="100" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/> </svg> -
效果展示
SVG 渐变
SVG 线性渐变
-
用法
-
<linearGradient>元素用于定义线性渐变； -
<linearGradient>标签必须嵌套在<defs>的内部，<defs>标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义； -
线性渐变可以定义为水平，垂直或角渐变：
- 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
- 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
- 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
-
渐变的颜色范围可由两种或多种颜色组成，每种颜色通过一个
<stop>标签来规定，offset 属性用来定义渐变的开始和结束位置；
-
-
示例代码
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> </svg> -
效果展示
SVG 放射渐变
-
用法
<radialGradient>元素用于定义线性渐变；<radialGradient>标签必须嵌套在<defs>的内部，<defs>标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义；- cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成；
- 渐变的颜色范围可由两种或多种颜色组成，每种颜色通过一个
<stop>标签来规定，offset 属性用来定义渐变的开始和结束位置；
-
示例代码
<svg width="100%" height="240px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="grey_blue" cx="20%" cy="40%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"></stop> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"></stop> </radialGradient> </defs> <ellipse cx="150" cy="120" rx="110" ry="100" style="fill:url(#grey_blue)"></ellipse> </svg> -
效果展示
打赏作者
您的打赏是我前进的动力
微信
支付宝
中介者模式
上一篇
评论
