svg

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 代码以 <svg> 元素开始包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。

SVG有一些预定义的形状元素,可被开发者使用和操作:

矩形 <rect>

圆形 <circle>

椭圆 <ellipse>

线 <line>

折线 <polyline>

多边形 <polygon>

路径 <path>

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)

<ellipse> 元素是用来创建一个椭圆:

椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的:

<line> 元素是用来创建一个直线:

<polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。

<polyline> 元素是用于创建任何只有直线的形状: 曲线

<path> 元素用于定义一个路径。

下面的命令可用于路径数据:

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

<text> 元素用于定义文本。

Z = closepath

SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面:

stroke

stroke-width

stroke-linecap

stroke-dasharray

SVG可用的滤镜是:

feBlend - 与图像相结合的滤镜feColorMatrix - 用于彩色滤光片转换- 过滤阴影feSpecularLightingfeTilefeTurbulencefeDistantLight - 用于照明过滤fePointLight - 用于照明过滤feSpotLight - 用于照明过滤

posted @ 2019-05-23 09:35  前端xh  阅读(275)  评论(0编辑  收藏  举报