文档章节

SVG学习笔记

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

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>


© 著作权归作者所有

共有 人打赏支持
请修改个人昵称
粉丝 6
博文 48
码字总数 7496
作品 0
合肥
程序员
学习 kity 笔记(二)

继续学习 kity. 简要看一下 core/utils.js 和 core/browser.js. == utils.js == 函数 each(arrayorobject, callback, context?) 遍历数组或对象, 调用回调. 函数 extend(obj, src...) 扩展 ......

刘军兴 ⋅ 2015/11/12 ⋅ 0

SVG 学习笔记

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

Penn_Xu ⋅ 2017/11/30 ⋅ 0

MySQL入门教程系列-1.5 如何学习MySQL

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

同一种调调 ⋅ 2016/09/28 ⋅ 0

SVG坐标系统学习笔记

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

alazyer ⋅ 2016/08/25 ⋅ 0

学习 kity 笔记(三) 继续 SVG

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

刘军兴 ⋅ 2015/11/13 ⋅ 0

学习 kity 笔记(四) Paper 和 Shape

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

刘军兴 ⋅ 2015/11/16 ⋅ 0

d3.js学习笔记--Mike Bostock: VIZBI: D3 Workshop

Preface d3是基于HTML和SVG的数据可视化JS库. 它将数据(data)和元素(DOM)相互绑定在一起, 并且在数据实时改变情况下DOM元素也会实时改变. 所以, D3是Data-Driven Documents, 即数据驱动元素,...

fzyz_sb ⋅ 2016/10/23 ⋅ 0

学习 kityminder 笔记(十)

今天学习 layout 下的各个 js. 在此之前, 需要回顾一下 core/layout. 注意在 core 下面有 layout.js, module 下面也有 layout.js, 我是被混淆了, 不能换个名字么? === 布局基类 Layout 位于 ...

刘军兴 ⋅ 2015/11/25 ⋅ 0

学习 svg 笔记(一) SVG 动画

在前一篇学习 kityminder 中我们遇到到了动画, 为此先补充学习 svg 动画的知识, 以及相关的 kity 如何封装动画 到 kity.Animator 中的问题. 购买的图书 《SVG精髓》有一个良好的示例网站, 位...

刘军兴 ⋅ 2015/11/30 ⋅ 0

《css揭秘》学习笔记(二)

第三章形状 9、自适应的椭圆 圆形:给一个正方形设置一个大于边长长度一半的border-radius即可。 椭圆: snippetid="2473224" snippetfilename="blog201707071_2396214" name="code" class=...

u014744118 ⋅ 2017/07/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法之SlopOne

一、 算法原理 有别于基于用户的协同过滤和基于item的协同过滤,SlopeOne采用简单的线性模型估计用户对item的评分。如下图,估计UserB对ItemJ的偏好 图(1) 在真实情况下,该方法有如下几个...

xiaomin0322 ⋅ 21分钟前 ⋅ 0

LVM讲解

LVM是什么 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,Linux用户安装Linux操作系统时遇到的一个常见的难以决定的问题就是如何正确地...

李超小牛子 ⋅ 30分钟前 ⋅ 0

mysql更改密码、连接mysql、mysql常用命令

1. 更改mysql的root账户密码: mysql中root账户和系统root不是一个账户 1.1 更改环境变量PATH,增加mysql绝对路径 由于mysql安装目录为/usr/local/mysql/,所以系统不能直接使用mysql,需把/...

laoba ⋅ 32分钟前 ⋅ 0

阿里云发布企业数字化及上云外包平台服务:阿里云众包平台

摘要: 阿里云正式发布旗下众包平台业务(网址:https://zhongbao.aliyun.com/),支持包括:网站定制开发,APP、电商系统等软件开发,商标、商品LOGO、VI、产品包装设计、营销推广、大数据人...

猫耳m ⋅ 32分钟前 ⋅ 0

阿里云发布企业数字化及上云外包平台服务:阿里云众包平台

摘要: 阿里云正式发布旗下众包平台业务(网址:https://zhongbao.aliyun.com/),支持包括:网站定制开发,APP、电商系统等软件开发,商标、商品LOGO、VI、产品包装设计、营销推广、大数据人...

阿里云云栖社区 ⋅ 35分钟前 ⋅ 0

1.03-Maven中使用ueditor富文本编辑器

起因:在maven仓库未找到百度的ueditor的jar包 操作: 1.下载百度的ueditor的jar包 2.打开命令行,切换到ueditor的下载位置,运行一下命令: mvn install:install-file -Dfile=ueditor-1.1....

静以修身2025 ⋅ 41分钟前 ⋅ 0

几道Spring 面试题

1、BeanFactory 接口和 ApplicationContext 接口有什么区别? ApplicationContext 接口继承BeanFactory接口 Spring核心工厂是BeanFactory BeanFactory采取延迟加载,第一次getBean时才会初始...

职业搬砖20年 ⋅ 50分钟前 ⋅ 0

包饺子

http://storage.slide.news.sina.com.cn/slidenews/77_ori/2018_24/74766_826131_625489.gif

霜叶情 ⋅ 51分钟前 ⋅ 0

xml解析

方法一: String s_xml1 = "<xml>" + "<head>lalalalal</head>" + "<body>1234</body>" + "</xml>"; try { DocumentBuilderFactory documentBuilderFactory......

GithubXD ⋅ 今天 ⋅ 0

reuse stream

Although Java streams were designed to be operated only once, programmers still ask how to reuse a stream. From a simple web search, we can find many posts with this same issue ......

idoz ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部