svg mysql_SVG介绍

柔情只为你懂 2022-10-26 12:58 214阅读 0赞

SVG介绍

SVG是指可缩放矢量图(Scalable Vector Graphics)。SVG使用XML格式来定义图形。SVG可以直接嵌入到HTML页面中。

位图和矢量图

位图(Bitmap)是由很多具有自己颜色的像素组成的图像。放大后需要通过插值计算来补充像素，所以会失真。

矢量图的有点：

文件小

缩放，旋转或者改变图形不失真

线条，颜色平滑，锯齿不明显。

矢量图最终也要转成位图来表示。

SVG形状

SVG标签

...

SVG有七种图形元素。

矩形

style="fill: yellow; stroke: red; stroke-width:2; opacity:0.5" />

参数含义

x为矩形左上角x坐标

y为矩形左上角y坐标

width为矩形宽度

height为矩形高度

rx为圆角矩形椭圆在x方向上的半径

ry为圆角矩形椭圆在y方向上的半径

style用来指定样式

圆形

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

r 属性定义圆的半径。

椭圆形

参数：

cx 属性定义圆点的 x 坐标

cy 属性定义圆点的 y 坐标

rx 属性定义水平半径

ry 属性定义垂直半径

线段

参数：

x1 属性在 x 轴定义线条的开始

y1 属性在 y 轴定义线条的开始

x2 属性在 x 轴定义线条的结束

y2 属性在 y 轴定义线条的结束

多边形

多边形是闭合图形，起点和终点最后要连接在一起。

参数points 属性定义多边形每个角的 x 和 y 坐标

折线

非闭合图形

路径

路径使用标签，其可以画出上面所有的图形。

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

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

A = elliptical Arc (弧线)

Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位(相对于当前画笔所在点)。

这里涉及到贝塞尔曲线，请看我另外一篇博客的介绍。

文字

Hello Kris

参数：

x: 文字的x坐标

y: 文字的y坐标

dx: 往左(负数)或往右(正数)偏移

dy: 往上(负数)或往下(正数)偏移

rotate: 旋转角度(顺时针为正，逆时针为负)

textLength: 文字的显示长度

样式

SVG中可以使用CSS的class。

也可以单独写

也可以合并写：

标记

标记(marker)是SVG中一个重要的概念。用于重复利用已经定义好的图形。

marker是一种可以连结一个或多个path、line、polyline、或polygon的顶点的标志类型。最常见的用例是绘制箭头或在输出结果的线上的标记一个(polymarker)图形。

滤镜

滤镜(filter)使图形更具有艺术效果。例如高斯模糊。

fill="yellow" filter="url(\#f1)" />

渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型：

Linear: 线性渐变

Radial: 放射性渐变

linearGradient元素用于定义线性渐变。

放射性渐变

@完

参考：

svg mysql_SVG介绍

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 svg mysql_SVG介绍

相关 SVG

相关【SVG】SVG快速入门

相关 SVG_SVG动画案例

相关【svg】svg动画

相关 SVG

相关 SVG

相关 SVG

相关 SVG Sprites技术介绍

相关 svg js动态生成svg标签