html5-svg开发手册

2018-01-31 11:00:22来源:https://fanerge.github.io/html5-svg开发手册.html作者:余真帆的博客人点击

分享

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参考手册


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台