html5-svg开发手册

2018-01-31 shanghaict

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

SVG 使用 XML 格式定义图像。

简单例子

<svg xmlns="http://www.w3.org/2000/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="http://www.w3.org/2000/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="http://www.w3.org/2000/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="http://www.w3.org/2000/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="http://www.w3.org/2000/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="http://www.w3.org/2000/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="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>

polygon

用来创建含有不少于三个边的图形

属性:points 属性定义多边形每个角所在点的 x 和 y 坐标

<svg xmlns="http://www.w3.org/2000/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="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: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="http://www.w3.org/2000/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="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" 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="http://www.w3.org/2000/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="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>

效果

Stroke 属性

用于线条(path)、文字(text)、元素(rect)

颜色(6中颜色均支持)– stroke=”red”

宽度 – stroke-width=””

路劲的终结 – stroke-dasharray=”20 10 5 3” // 20和5表示实线的长度,10和3表示空白的长度

滤镜

用来增加对SVG图形的特殊效果

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="feBlend1">
        <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="http://www.w3.org/2000/svg" version="1.1">
	// 定义id为f1的滤镜
	// in="SourceGraphic"这个部分定义了由整个图像创建效果
	// stdDeviation属性定义模糊量
	<filter id="f1" 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="http://www.w3.org/2000/svg" version="1.1">
	<filter id="f1" 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="http://www.w3.org/2000/svg" version="1.1">
    <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>
	<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

径向

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <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>
	<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

svg参考手册


用户评论
开源开发学习小组列表