svg mysql_SVG介绍

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介绍相关推荐

html矢量图 SVG VML 介绍
观看者:想了解html矢量图知识的同学目标:了解html矢量图知识,svg和vml 兼容方案. 实现方式:代码及相关文字解释. 最近web项目需要一些流程图的支持,于是研究了一下这部分东西,觉得很好 ...
svg mysql_SVG 实例
SVG 实例简单的 SVG 实例一个简单的SVG图形例子: 这里是SVG文件(SVG文件的保存与SVG扩展): /p> "http://www.w3.org/Graphics/SV ...
svg 可视化操作_使用SVG和D3可视化浏览指标
svg 可视化操作本文是两篇系列文章中的第一篇,该系列文章演示了可视化技术,这些技术可以帮助您从数据中提取业务价值信息. 您将看到如何使用可伸缩矢量图形(SVG)和开放源代码的D3 JavaScri ...
svg基础--基本语法与标签
###svg系列–基础这一系列的文章会总结svg的基础知识和一些经典的案例. ####svg简介 SVG(Scalable Vector Graphics)is an XML-based Langu ...
svg android动画制作,使用 SVG 来制作 Morphing 动画效果
何为Morphing动画开始之前,先来了解下什么是Morphing动画.所谓Morphing动画是表示,同一个模型,从一个形状变到另一个形状.如下图所示,从形状1渐变到形状2,再从形状2渐变到形状3 ...
Javascript的新领域——动态图片处理之SVG
近三年前的一篇旧文,虽然在浏览器和相关技术标准方面有过时之处,但总体上对概念的理解.开发的思路和代码样例仍然有参考价值. 背景当Javascript被Netscape公司发明出来时,它被用来做一些琐 ...
SVG动画编程及其应用
SVG动画编程及其应用 2008.03.16 张杰,刘晓平来源:SVG中国(ChinaSVG.COM) 本文分析了SVG图形技术.SVG动画模型与DOM.SMIL.SIMLANIM的关系以及SVG简 ...
SVG Sprite 使用简介
SVG简介 SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出 ...
什么？！！你从来没用SVG打造过不规则的自定义View？
目录 SVG概念 SVG特性 SVG在安卓中能做什么标准SVG预览 SVG语法介绍 SVG图片的生成 SVG图下载地址巴铁!奔跑的小恐龙?(示例开始) 自定义View展示SVG SVG概念 SVG ...

svg mysql_SVG介绍

svg mysql_SVG介绍相关推荐

最新文章

热门文章