文档章节

SVG学习笔记

请修改个人昵称
 请修改个人昵称
发布于 2016/03/07 11:49
字数 2027
阅读 34
收藏 2

1. SVG

    类似flash,具有可伸缩性。图形本身为xml格式的文件。

2. 圆:<circle> 

<?xml version="1.0" standalone="no"?>                                    //no标识不是独立的引入了一个外部文件,DTD

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"                 //引用了这个外部的 SVG DTD,及其路径
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"                    //version 属性可定义所使用的 SVG 版本
xmlns="http://www.w3.org/2000/svg">                                    //xmlns 属性可定义 SVG 命名空间

<circle cx="100" cy="50" r="40" stroke="black"                        //cx 和 cy 属性定义圆中心的 x 和 y 坐标,r 属性定义圆的半径
stroke-width="2" fill="red"/>                                                        //stroke 和 stroke-width 属性控制如何显示形状的轮廓

</svg>

3. 嵌入html方式:<embed>,<object>,<iframe>

<embed src="rect.svg" width="300" height="100"                         //如果需要创建合法的 XHTML,就不能使用 <embed>。任何                                                                                                               //HTML 规范中都没有 <embed> 标签,adobe自己的
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />        //pluginspage 属性指向下载插件的 URL
<object data="rect.svg" width="300" height="100"                       //HTML 4 的标准标签,缺点是不允许使用脚本,adobe不支持
type="image/svg+xml"    
codebase="http://www.adobe.com/svg/viewer/install/" />            //codebase 属性指向下载插件的 URL
<iframe src="rect.svg" width="300" height="100">                        //可工作在大部分的浏览器中
</iframe>

4. 矩形:<rect> 

    1)

<?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 width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;                                    //style 属性用来定义 CSS 属性
stroke:rgb(0,0,0)"/>

</svg>

    2)透明度

<?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" width="250" height="250"                //x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左                                                                                                 //侧的距离是 0px)
                                                                                               //y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶                                                                                                 //端的距离是 0px)
style="fill:blue;stroke:pink;stroke-width:5;                        //CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1       
fill-opacity:0.1;stroke-opacity:0.9"/>                       //CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)
                                                                                    // opacity可以为整个元素定义透明度
</svg>

    3)圆角矩形

<?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"                //rx 和 ry 属性可使矩形产生圆角
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

</svg>

5. 椭圆:<ellipse>

    1)定义一个椭圆

<?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">

<ellipse cx="300" cy="150" rx="200" ry="80"                //cx 属性定义圆点的 x 坐标,cy 属性定义圆点的 y 坐标
                                                                                            //rx 属性定义水平半径,ry 属性定义垂直半径
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

    2)椭圆叠加

<?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">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>

<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>

<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>

</svg>

    3)椭圆组合

<?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">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>

<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>

</svg>

6. 线条:<line>

<?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">

<line x1="0" y1="0" x2="300" y2="300"                        //定义直线段,(x1,y1)为起点,(x2,y2)为终点
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

7. 多边形(不少于3个边):<polygon>

    1)三角形

<?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">

<polygon points="220,100 300,210 170,250"        //这个是三角形,定义了三个点(220,100),(300,210),(170,250)
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>

    2)四边形

<?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">

<polygon points="220,100 300,210 170,250 123,234"        //定义了四个点
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>

8. 折现:<polyline> 

<?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">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"            //定义6个点
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

9. 定义路径:<path>   

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

  • 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

    注:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

    1)定义一条路径

<?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">

<path d="M250 150 L150 350 L350 350 Z" />          //路径:(250,150)->(150,350)->(350,350)

</svg>

    2)定义一个螺旋路径

<?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">

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

10. 滤镜:<defs><filter>

  • feBlend

  • feColorMatrix

  • feComponentTransfer

  • feComposite

  • feConvolveMatrix

  • feDiffuseLighting

  • feDisplacementMap

  • feFlood

  • feGaussianBlur

  • feImage

  • feMerge

  • feMorphology

  • feOffset

  • feSpecularLighting

  • feTile

  • feTurbulence

  • feDistantLight

  • fePointLight

  • feSpotLight

<?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">

//<filter> 标签的 id 属性可为滤镜定义一个唯一的名称(同一滤镜可被文档中的多个元素使用)
//filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时,必须使用 # 字符
//滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
//<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
//in="SourceGraphic" 这个部分定义了由整个图像创建效果

<defs>                                                                                       
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>                //注意url定义

</svg>

11. 渐变:<defs>

    1)线性渐变:<linearGradient>

    线性渐变可被定义为水平、垂直或角形的渐变:

  • 当 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"
xmlns="http://www.w3.org/2000/svg">

//id为渐变定义一个唯一的名称,(x1,y1),(x2,y2)定义开始和结束位置
//渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位///置。

<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)"/>                //fill:url(#orange_red) 属性链接到此渐变

</svg>

12. 放射性渐变:<radialGradient> 

<?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%"        //cx、cy 和 r 属性定义外圈,
fx="50%" fy="50%">                                                                            //fx 和 fy 定义内圈
<stop offset="0%" style="stop-color:rgb(200,200,200);                   //offset 属性用来定义渐变的开始和结束位置
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>


本文转载自:http://www.w3school.com.cn/svg

共有 人打赏支持
上一篇: SVG几个效果
下一篇: dashboard文档
请修改个人昵称
粉丝 6
博文 55
码字总数 7496
作品 0
合肥
程序员
私信 提问
SVG 学习笔记

SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不...

Penn_Xu
2017/11/30
0
0
SVG坐标系统学习笔记

文章是阅读下面三篇关于SVG坐标和转化的文章的学习笔记, 重点学习了第一部分. [part1: The viewport, viewBox, and preserveAspectRatio][part1] [part2: The transform Attribute][part2] ...

alazyer
2016/08/25
16
0
学习 kity 笔记(三) 继续 SVG

接着上篇, SVG 元素就这些? (rect,circle ..., path) 还是w3c课程太简单...? 还是要买书? w3cschool 下一篇就直接学 svg 滤镜了. 可用的滤镜有 feBlend, feXXX (大约20个), (fe 是什么的缩写...

刘军兴
2015/11/13
0
0
MySQL入门教程系列-1.5 如何学习MySQL

在这里持续更新 MySQL入门教程系列-1.5 如何学习MySQL 如何学习 MySQL 这是一个伪命题,每个人都有适合自己的一套学习方法,各

同一种调调
2016/09/28
15
0
学习 kity 笔记(四) Paper 和 Shape

今天继续学习 kity. 根据前面了解的 svg, kity.Paper 大致应对应 svg 画布, 各种 Shape 大致对应 svg 图形元素. 因此需要查看 kity.Paper 类, 以及各个 kity.Shape 类, 了解它们如何封装, 以...

刘军兴
2015/11/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

对接比特币钱包的PHP开发包

BtcTool是一个基于第三方服务和离线裸交易实现的PHP比特币应用开发包,适合不希望部署本地 节点旳PHP开发者,开发包主要包含以下特性: 利用第三方服务获取指定地址的utxo集合 离线生成消费裸...

汇智网教程
18分钟前
1
0
【自用】 VHD to VHDX

VHDX: 在VHD 2TB 的基础上提供 64TB的容量。 支持逻辑扇区大小为 4KB,和每块的大小为 256MB,来优化虚拟磁盘性能。 比VHD提供更高的安全性、可靠性和性能。 convert-VHD –path d:\Hyper-v...

Tensor丨思悟
31分钟前
1
0
30 岁转行做Python开发晚吗?而且是零基础

最近有小伙伴问小编,30 岁转行做Python开发晚吗? 小编想说,其实无论男女,只要想学,有这个动力,就直接去行动。无论年龄,无论性别,只要你想一直勇往直前,那么想做的就去做吧~这里有一...

糖宝lsh
41分钟前
10
0
详解Spring中的Profile

前言 由于在项目中使用Maven打包部署的时候,经常由于配置参数过多(比如Nginx服务器的信息、ZooKeeper的信息、数据库连接、Redis服务器地址等),导致实际现网的配置参数与测试服务器参数混淆...

watermelon11
56分钟前
4
0
phper必知必会(二)

  1.说说你对进程,线程以及协程的理解      进程:是系统进行资源分配和调度的基本单位,是基本操作系统结构的基础。进程是程序基本执行的实体。进程与进程之间是独立的,拥有完全独立...

SEOwhywhy
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部