什么是svg
- SVG 意为可缩放矢量图形（Scalable Vector Graphics）
- SVG 使用 XML 格式定义图像
- SVG 是使用 XML 来描述二维图形和绘图程序的语言
- SVG 用来定义用于网络的基于矢量的图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
怎么写SVG
SVG 代码以<svg>元素开始，包括开启标签 <svg>和关闭标签 </svg>
width 和 height 属性可设置此 SVG 文档的宽度和高度
version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间
SVG 的
SVG 的
如果不写这两个属性，那么圆点会被设置为 (0, 0)，r 属性定义圆的半径
stroke 和 stroke-width 属性控制如何显示形状的轮廓
注意： 所有的开启标签必须有关闭标签！
实例
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="2" fill="pink" />
<circle cx="150" cy="100" r="80" fill="skyblue" />
<text x="150" y="115" font-size="16" text-anchor="middle" fill="white">我是用SVG画的圆</text>
</svg>
效果图
SVG怎么引入HTML文件
SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>
<embed src="circle1.svg" type="image/svg+xml" /> 或者
<object data="circle1.svg" type="image/svg+xml"></object> 或者
<iframe src="circle1.svg"></iframe>
SVG的代码可以直接嵌入到HTML页面中，或可以直接链接到SVG文件，就像上面的实例一样
还可以用 <a>标签链接到一个 SVG 文件：链接到 SVG 文件
<a href="circle1.svg">查看 SVG 文件</a>
SVG有哪些预定义的形状元素
- 矩形
- 圆形
- 椭圆
- 线
- 折线
- 多边形
- 路径
SVG 矩形
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x，y是坐标，相对于浏览器窗口的
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
rx 和 ry 属性可使矩形产生圆角
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y ="20" width="200" height="100" rx="20" ry="20"
style="fill:rgb(0,0,255);stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.8"/>
</svg>
效果图
SVG 圆形
cx和cy属性定义圆点的x和y坐标。如果不写cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="skyblue"/>
</svg>
效果图
SVG 椭圆
椭圆与圆是相似，不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的
CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="120" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
效果图
SVG 直线
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
效果图
SVG 多边形
points 属性定义多边形每个角的 x 和 y 坐标
实例
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:yellow;stroke:red;stroke-width:5;fill-rule:nonzero;" />
</svg>
效果图
SVG 多段线
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:black;stroke-width:4" />
</svg>
效果图
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
注意： 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
效果图
SVG 文本
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="25" fill="blue">我是SVG</text>
</svg>
效果图
还可以做文本链接
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
</svg>
SVG Stroke 属性
Stroke属性定义一条线，文本或元素轮廓颜色
Tstroke- width属性定义了一条线，文本或元素轮廓厚度
strokelinecap属性定义不同类型的开放路径的终结
strokedasharray属性用于创建虚线
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>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜
<filter>元素id属性定义一个滤镜的唯一名称
<feGaussianBlur>元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="black" stroke-width="3"
fill="red" filter="url(#f1)" />
</svg>
效果图
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型：Linear，Radial
<linearGradient>元素用于定义线性渐变。
<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平，垂直或角渐变：
当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变
<linearGradient>标签的id属性可为渐变定义一个唯一的名称
<linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个
填充属性把 ellipse 元素链接到此渐变
实例
<svg 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="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
效果图
<radialGradient>元素用于定义放射性渐变。
<radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
<radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个
填充属性把ellipse元素链接到此渐变
实例
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
效果图
7725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
