SVG 意为可缩放矢量图形(Scalable Vector Graphics)。
SVG 使用 XML 格式定义图像。
简单例子
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
svg的特点
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
一个单独的 .svg文件
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
SVG 在 HTML 页面
使用 embed 标签
<embed src="circle1.svg" type="image/svg+xml" />
使用 object 标签
<object data="circle1.svg" type="image/svg+xml"></object>
使用 iframe 标签
<iframe src="circle1.svg"></iframe>
直接在HTML嵌入SVG代码
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
链接到SVG文件
<a href="circle1.svg">View SVG file</a>
svg 形状元素
下面所有样式均可以写成属性,建议属性和样式区分。
通用样式:fill、fill-opacity、stroke、stroke-width、stroke-opacity、opacity
rect
用来创建矩形及其变种
属性:x(矩形到浏览器窗口左侧的距离)、y、width、height、rx、ry(圆角半径)
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
circle
用来创建一个圆
属性:cx、cy(园中心坐标)、r
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
elipse
用来创建一个椭圆
属性:cx(椭圆坐标)、cy、rx、ry(椭圆半径)
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>
line
用来创建一个直线
属性:x1、y1、x2、y2(分别对应起点和终点的坐标)
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
polygon
用来创建含有不少于三个边的图形
属性:points 属性定义多边形每个角所在点的 x 和 y 坐标
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
样式:fill-rule: nonzero | evenodd | inherit
nonzero:
按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。
evenodd:
按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。
polyline
用来创建任何只有直线的形状
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
path
用来定义一个路径
属性:d(路径数据)
下列的命令可用于路径数据:
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
PS:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
text
用来定义文本
属性:x、y、transform(rotate、skew、scale、translate)
配合 defs-path 使用
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>
tspan
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
</svg>
配合 a
<svg xmlns="/2014th7cj/d/file/p/20180131/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>
效果
Stroke 属性
用于线条(path)、文字(text)、元素(rect)
颜色(6中颜色均支持)– stroke=”red”
宽度 – stroke-width=””
路劲的终结 – stroke-dasharray=”20 10 5 3” // 20和5表示实线的长度,10和3表示空白的长度
滤镜
用来增加对SVG图形的特殊效果
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<filter>
<feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="0.9"/>
<feBlend in="SourceGraphic" in2="floodFill" mode="normal"/>
</filter>
<circle cx="150" cy="50" r="40" fill="red" filter="url(#feBlend1)"/>
</svg>
feBlend
使用不同的混合模式把两个对象合成在一起
专有属性:
1.in=顶层生效
SourceGraphic
该关键词表示图形元素自身将作为
原语的原始输入.
SourceAlpha
该关键词表示图形元素自身将作为
原语的原始输入. SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的透明度.
BackgroundImage
该关键词表示filter元素当前底下的区域的图形快照将被调用.
BackgroundAlpha
跟BackgroundImage相同除了只使用透明度.
FillPaint
StrokePaint
2.in2=底层生效
同上
3.mode=normal | multiply | screen | darken | lighten // 混合模式
feColorMatrix
该滤镜基于转换矩阵对颜色进行变换
专有属性:
1.in
同上
2.type
3.values
PS:2和3会根据不同滤镜效果参数不一样
feComponentTransfer
对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作
专有属性:
feComposite
该滤镜执行两个输入图像的智能像素组合,在图像空间中使用以下Porter-Duff合成操作之一:over、in、atop、xor。
feConvolveMatrix
应用了一个矩阵卷积滤镜效果。一个卷积在输入图像中把像素与邻近像素组合起来制作出结果图像。通过卷积可以实现各种成像操作,包括模糊、边缘检测、锐化、压花和斜角。
feDiffuseLighting
滤镜光照一个图像,使用alpha通道作为隆起映射。结果图像,是一个RGBA不透明图像,取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。
feDisplacementMap
映射置换滤镜,该滤镜用来自图像中从in2到空间的像素值置换图像从in到空间的像素值
feFlood
该滤镜用flood-color元素定义的颜色和flood-opacity元素定义的不透明度填充了滤镜子区域
feGaussianBlur
该滤镜对输入图像进行高斯模糊,属性stdDeviation中指定的数量定义了钟形
feImage
滤镜从外部来源取得图像数据,并提供像素数据作为输出(意味着如果外部来源是一个SVG图像,这个图像将被栅格化。)
feMerge
滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用result存储别的滤镜的输出可以实现这一点,然后在一个
feMorphology
该滤镜用来侵蚀或扩张输入的图像。它在增肥或瘦身效果方面特别有用。
feOffset
该输入图像作为一个整体,在属性dx和属性dy的值指定了它的偏移量。
feSpecularLighting
该滤镜照亮一个源图形,使用alpha通道作为隆起映射。该结果图像是一个基于光色的RGBA图象。
feTile
输入图像是平铺的,结果用来填充目标。它的效果近似于一个
feTurbulence
该滤镜利用Perlin噪声函数创建了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成。
feDistantLight
该滤镜定义了一个距离光源,可以用在灯光滤镜
元素或
fePointLight
该元素实现了 SVGFEPointLightElement 接口。
feSpotLight
feSpotLight 元素是一种光源元素,用于SVG文件。
PS:您可以在每个 SVG 元素上使用多个滤镜
模糊效果
<defs>元素定义短并含有特殊元素(如滤镜)定义。
<filter>标签使用必需的id属性来定义向图形应用哪个滤镜。
实例
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
// 定义id为f1的滤镜
// in="SourceGraphic"这个部分定义了由整个图像创建效果
// stdDeviation属性定义模糊量
<filter x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
// 使用id为f1的滤镜
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
阴影
实例
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<filter x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="30" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
渐变
线性
实例
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<linearGradient 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>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
径向
实例
<svg xmlns="/2014th7cj/d/file/p/20180131/svg" version="1.1">
<radialGradient 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>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
svg参考手册