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 标签

使用 object 标签

使用 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文件

svg 形状元素

下面所有样式均可以写成属性，建议属性和样式区分。

通用样式：fill、fill-opacity、stroke、stroke-width、stroke-opacity、opacity

rect

用来创建矩形及其变种

属性：x（矩形到浏览器窗口左侧的距离）、y、width、height、rx、ry（圆角半径）

用来创建一个圆

属性：cx、cy（园中心坐标）、r

用来创建一个椭圆

属性：cx（椭圆坐标）、cy、rx、ry（椭圆半径）

用来创建一个直线

属性：x1、y1、x2、y2（分别对应起点和终点的坐标）

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

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

样式：fill-rule: nonzero | evenodd | inherit

nonzero：

按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。

evenodd：

按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。

polyline

用来创建任何只有直线的形状

用来定义一个路径

属性：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：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

用来定义文本

属性：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图形的特殊效果

使用不同的混合模式把两个对象合成在一起

专有属性：

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

html5-svg开发手册

相关文章

最新文章

本站导航

平面设计

网页设计

设计赏析

网络编程

操作系统

办公软件

数据库

非主流

QQ专区

游戏频道

最新摄影

最新教程周点击榜