SVG
来源:互联网 发布:电影社交网络百度云 编辑:程序博客网 时间:2024/05/22 13:21
什么是SVG?
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
HTML 页面中的 SVG
下面,你会看到三种把 SVG 文件嵌入 HTML 页面的不同方法。
<embed>
标签被所有主流的浏览器支持,并允许使用脚本。
<embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
注释:当在 HTML 页面中嵌入 SVG 时使用 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 。任何 HTML 规范中都没有 标签。
<object>
标签是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。
<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
注释:假如您安装了最新版本的 Adobe SVG Viewer,那么当使用 标签时 SVG 文件无法工作(至少不能在 IE 中工作)!
<iframe>
标签可工作在大部分的浏览器中。
<iframe src="rect.svg" width="300" height="100"></iframe>
SVG 形状
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
//矩形<?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 width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/></svg>
x 和 y 定义矩形的起点位置;rx 和 ry 属性可使矩形产生圆角;
CSS 的 opacity 属性定义整个元素的透明值(合法的范围是:0 - 1)。
//圆形<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。
//椭圆<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2""/>
cx 和 cy 属性定义圆点的 x 和 y 坐标
rx 属性定义水平半径; ry 属性定义垂直半径
//线条<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
x1 属性在 x 轴定义线条的开始,y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束,y2 属性在 y 轴定义线条的结束
多边形<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
points 属性定义多边形每个角的 x 和 y 坐标
//折线<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
//路径M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Belzier curveT = smooth quadratic Belzier curvetoA = elliptical ArcZ = closepath注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。<path d="M250 150 L150 350 L350 350 Z" />
上面的例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。
//线性渐变<linearGradient> 可用来定义 SVG 的线性渐变。<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写,它可对诸如渐变之类的特殊元素进行定义。线性渐变可被定义为水平、垂直或角形的渐变:当 y1 和 y2 相等,而 x1 和 x2 不同时,可创建水平渐变当 x1 和 x2 相等,而 y1 和 y2 不同时,可创建垂直渐变当 x1 和 x2 不同,且 y1 和 y2 不同时,可创建角形渐变<?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 width="100%" height="100%" version="1.1" mlns="http://www.w3.org/2000/svg"><defs> <linearGradient id="orange_red" 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></defs><ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/></svg>
<linearGradient>
标签的 id 属性可为渐变定义一个唯一的名称
fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
<linearGradient>
标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 标签来规定。offset 属性用来定义渐变的开始和结束位置
//放射性渐变<radialGradient> 用来定义放射性渐变。<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写,它允许对诸如渐变等特殊元素进行定义。<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> </radialGradient></defs><ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/></svg>
<radialGradient>
标签的 id 属性可为渐变定义一个唯一的名称,fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变,cx、cy 和 r 属性定义外圈,而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop>
标签来规定。offset 属性用来定义渐变的开始和结束位置。
- svg
- SVG
- SVG
- SVG
- SVG
- SVG
- svg
- svg
- SVG
- SVG
- SVG
- SVG
- SVG
- svg
- svg
- SVG
- svg
- svg
- 云数据库HBase版使用教程
- Android新特性之ContraintLayout约束布局
- Hibernate--悲观锁与乐观锁
- java上传到服务器的时候,上传成功,但是浏览器反应慢。
- bzoj 1088(递推)
- SVG
- 指针空间的申请和释放
- oracle中取图片,转json格式,并转成图片
- Git 警告 LF will be replaced by CRLF
- MS SQL执行大脚本文件时,提示“内存不足”的解决办法
- Java笔记之数组类型
- 笔记--filter
- java删除数组中的第n个数
- Android 判断通知栏是否打开及前往设置页面