HTML5之SVG 2D入门7—SVG元素的重用与引用


前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点-SVG元素的重用。

组合-g元素
g元素是一种容器,它组合一组相关的图形元素成为一个整体;这样,我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用,提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子:

复制代码
代码如下:

<svgxmlns="http://www.w3.org/2000/svg"
version="1.1"width="5cm"height="5cm">
<desc>Twogroups,eachoftworectangles</desc>
<gid="group1"fill="red">
<rectx="1cm"y="1cm"width="1cm"height="1cm"/>
<rectx="3cm"y="1cm"width="1cm"height="1cm"/>
</g>
<gid="group2"fill="blue">
<rectx="1cm"y="3cm"width="1cm"height="1cm"/>
<rectx="3cm"y="3cm"width="1cm"height="1cm"/>
</g>
<!--Showoutlineofcanvasusing'rect'element-->
<rectx=".01cm"y=".01cm"width="4.98cm"height="4.98cm"
fill="none"stroke="blue"stroke-width=".02cm"/>
</svg>

注意几点
1.xmlns="http://www.w3.org/2000/svg"表明了整个svg元素默认的命名空间是svg。这个在无歧义的时候可以省略。这里由于svg文档是一个XML文档,XML命名空间的相关规则这里都是适用的。例如可以给svg显示的指定命名空间,给命名空间提供别名等。
2.g元素是可以嵌套的。
3.组合起来的图形元素就和单个的元素一样,可以给id值,这样,需要的时候(例如动画和重用一组元素)只用引用这个id值就可以了。
4.组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等),这也是使用组合的一种场景。

模板-symbol元素
symbol元素用于定义图形模板(模板可以包含很多图形),这个模板可以被use元素实例化。模板的功能与g元素很相似,都是提供一组图形对象,但是也有一些区别。与g元素不同的地方是:
1.symbol元素本身是不会被渲染的,只有symbol模板的实例会被渲染。
2.symbol元素可以拥有属性viewBox和preserveAspectRatio,这些允许symbol缩放图形元素。

从渲染角度来说,与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素;这些元素不会直接被渲染;他们的使用方式基本都是由use元素去实例化。正是这个原因,对于symbol来说,'display'属性是没有意义的。
下面这个修改过的代码显示了symbol的使用方式:

复制代码
代码如下:

<svgxmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"width="5cm"height="5cm">
<desc>Twogroups,eachoftworectangles</desc>
<symbolid="group1"fill="red">
<rectx="1cm"y="1cm"width="1cm"height="1cm"/>
<rectx="3cm"y="1cm"width="1cm"height="1cm"/>
</symbol>
<gid="group2"fill="blue">
<rectx="1cm"y="3cm"width="1cm"height="1cm"/>
<rectx="3cm"y="3cm"width="1cm"height="1cm"/>
</g>
<usexlink:href="#group1"target="_blank"rel="nofollow">
<!--Showoutlineofcanvasusing'rect'element-->
<rectx=".02cm"y=".02cm"width="4.96cm"height="4.96cm"
fill="none"stroke="blue"stroke-width=".02cm"/>
</svg>

定义-defs元素
SVG允许定义一组对象,然后重用这组对象(注意,不仅仅是图形对象)。最常见的例子如定义渐变色,然后再其他的图形对象中赋给fill属性。渐变色定义的时候是不会渲染的,所以这类型的对象可以放到任何地方。重用对于图形对象中也是经常存在的,而且我们也不希望定义的时候直接渲染,而是想在引用的地方渲染,这个可以用defs元素实现。

通常情况下,推荐的做法是:只要有可能,就把被引用的对象放到defs元素中。这些对象通常是:altGlyphDef,clipPath,cursor,filter,marker,mask,pattern,linearGradient,radialGradient,symbol和图形对象等。把这些对象定义在defs元素中很容易理解,所以就提高了可访问性。

其实作为容器对象的g元素、symbol元素、defs元素都不同程度上提供了重用的作用,只不过每个元素的特性可能少许不同:比如g元素是直接渲染的,symbol和defs不会直接渲染,symbol含有viewBox属性,会创建新的视窗。

通常都会给在defs中定义的元素赋予id属性,并在用到的地方直接使用。根据元素的不同,这些定义可以用到不同地方,比如下面的渐进色作为属性来使用了:

复制代码
代码如下:

<svgwidth="8cm"height="3cm"
xmlns="http://www.w3.org/2000/svg"version="1.1">
<desc>LocalURIreferenceswithinancestor's'defs'element.</desc>
<defs>
<linearGradientid="Gradient01">
<stopoffset="20%"stop-color="#39F"/>
<stopoffset="90%"stop-color="#F3F"/>
</linearGradient>
</defs>
<rectx="1cm"y="1cm"width="6cm"height="1cm"
fill="url(#Gradient01)"/>
</svg>

图形相关元素的定义可以用use元素链接到文档。例如:

复制代码
代码如下:

<svgwidth="10cm"height="3cm"viewBox="0010030"version="1.1"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>ExampleUse01-Simplecaseof'use'ona'rect'</desc>
<defs>
<rectid="MyRect"width="60"height="10"/>
</defs>
<rectx=".1"y=".1"width="99.8"height="29.8"
fill="none"stroke="blue"stroke-width=".2"/>
<usex="20"y="10"xlink:href="#MyRect"/>
</svg>

在这里请注意xlink名称空间的使用。尽管大多数查看器没有它也将正确显示这一项,但为了保持一致,xlink名称空间应该在<svg></svg>元素上定义。

引用-use元素
任何svg,symbol,g,单个的图形元素和use元素本质上都可以作为模板对象被use元素引用(例如初始化)。use引用的图形内容会在指定的位置渲染。与image元素不同,use元素不能引用整个文档。
use元素也有x,y,width和height属性,这些属性可以省略,如果不省略的话,会将被引用的图形内容坐标或长度映射到当前的用户坐标空间来。

use元素的作用过程就相当于把被引用的对象深拷贝一份到独立的非公开的DOM树中;这棵树的父节点是use元素。虽然是非公开的DOM节点,但是本质上还是DOM节点,所以被引用对象的所有属性值、动画、事件、CSS的相关设置等都会拷贝多来并都还是会起作用,而且这些节点也会继承use元素和use祖先的相关属性(注意引用元素是深拷贝,这些拷贝过来的元素与原来的元素已经无关系了,所以这里不会继承被引用元素祖先节点的属性),如果这些节点本身有相关(CSS)属性,还会覆盖继承来的属性,这些与普通的DOM节点是一致的,所以对use元素使用"visibility:hidden"时要小心,并不一定会起作用。但是由于这部分节点是非公开的,在DOM操作中,也只能看到use元素,所以也只能操作到use元素。

从视觉效果来看,use元素更像是占位符,渲染完成后的视觉效果就和直接用被引用对象渲染是一样的:
1.use元素引用一个symbol元素
这种情况下,视觉效果就相当于:
(1)把use元素换成g元素;
(2)把use的除x,y,width,height,xlink:href外的属性全部移到g元素;
(3)把use的x,y属性变成translate(x,y),追加到g元素的transform属性最后;
(4)把引用的symbol元素换成svg元素,这个svg元素会显式使用use元素的width和height属性(use元素没有这些属性则是100%);
(5)把引用的symbol元素的图形内容深拷贝到替换的svg中。
2.use元素引用一个svg元素
这种情况下,视觉效果就相当于:
(1)把use元素换成g元素;
(2)把use的除x,y,width,height,xlink:href外的属性全部移到g元素;
(3)把use的x,y属性变成translate(x,y),追加到g元素的transform属性最后;
(4)把引用的svg元素包括内容拷贝过来,这个svg元素会显式使用use元素的width和height属性(use元素没有这些属性则使用原来的值);
3.其他情况
这些情况下的视觉效果就相当于:
(1)把use元素换成g元素;
(2)把use的除x,y,width,height,xlink:href外的属性全部移到g元素;
(3)把use的x,y属性变成translate(x,y),追加到g元素的transform属性最后;
(4)把引用元素拷贝过来;
看下面例子的视觉效果

复制代码
代码如下:

<svgwidth="10cm"height="3cm"viewBox="0010030"version="1.1"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>ExampleUse03-'use'witha'transform'attribute</desc>
<defs>
<rectid="MyRect"x="0"y="0"width="60"height="10"/>
</defs>
<rectx=".1"y=".1"width="99.8"height="29.8"
fill="none"stroke="blue"stroke-width=".2"/>
<usexlink:href="#MyRect"
transform="translate(20,2.5)rotate(10)"/>
</svg>

下面的图和上面的图外观是一样的

复制代码
代码如下:

<svgwidth="10cm"height="3cm"viewBox="0010030"
xmlns="http://www.w3.org/2000/svg"version="1.1">
<desc>ExampleUse03-'use'witha'transform'attribute</desc>
<rectx=".1"y=".1"width="99.8"height="29.8"
fill="none"stroke="blue"stroke-width=".2"/>
<gtransform="translate(20,2.5)rotate(10)">
<rectx="0"y="0"width="60"height="10"/>
</g>
</svg>

实用参考:
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/



相关阅读:
JavaScript中常见获取元素的方法汇总
简单掌握HTML中水平线标注与代码注释的用法
MYSQL必知必会读书笔记第十和十一章之使用函数处理数据
asp.net显示图片到指定的Image控件中 具体实现
asp.net文件上传示例分享
jquery判断密码强度的验证代码
Win10 Mobile预览版最新是1051x(x代表某位数字) 预计本周推送
如何让IIS6支持svg图像显示
C# Console利用mspaint打开图像并保存的方法
Win10 Mobile 10240泄露版或不能升级到官方推送预览版
jquery引用方法时传递参数原理分析
php实现获取文章内容第一张图片的方法
thinkphp3.2.2实现生成多张缩略图的方法
使用yum更新时不升级Linux内核的方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 CMS SQL jQuery C# C++ java Android IOS oracle MongoDB PostgreSQL SQLite 交通频道 G4722 G1875 G215 G569 G421 G6733 G7577 G8906 G1235 G4916 G7291 G1953 G245 G662 G1570 G6285 G719 G1836 G1346 G4781 G4908 G289 G6781 G9290 G7358 G1928 G1815 G325 G132 G4901 G6012 G6290 G7131 G5367 G184 G151 G5303 G1136 G6481 G7028 G575 G1744 G7660 G7693 G2344 G4937 G1234 G1814 G6252 G1492 G253 G2926 G883 G9275 G1231 G556 G241 G1306 G7646 G8103 G600 G1858 G9678 G6160 G7156 G825 G1125 G7249 G1809 G1350 G432 G9466 G7067 G785 G6404 G4663 G7008 G150 G823 G1514 G7529 G1201 G2353 G205 G7629 G9409 G6147 G677 G390 G8016 G9239 G456 G828 G8045 G491 G7145 G397 G7012 G1021 G6482 G2322 G7264 G1301 G9247 G96 G1294 G7133 G4824 G7005 G1653 G5307 G1213 G822 G4837 G1422 G411 G6227 G1571 G359 G1882 G6074 G7678 G21 G7077 G1272 G8918 G9645 G461 G1254 G1846 G8021 G7303 G1104 G76 G82 G621 G218 G8533 G2341 G8543 G555 G8013 G4802 G1364 G1153 G1342 G1861 G8905 G590 G4780 G668 G9261 G1304 G1638 G1395 G2914 G8003 G7158 G1833 G1873 G8128 G1856 G1841 G8709 G7346 G4612 G2103 G835 G8712 G381 G7240 G8932 G507 G29 G4054 G6273 G6752 G426 G211 G9473 G7119 G2333 G1567 G6153 G360 G4011 G5301 G7648 G8010 G8015 G6706 G614 G423 G8557 G9465 G72 G6018 G8901 G7030 G123

丹东 云霄 辽中 德阳 克拉玛依 惠山 招远 昭通 铁岭西 延吉西 军粮城北 定西 晋中 许昌东 郫县 诏安 七台河 高碑店东 南昌 延安 敦化 铜陵北 嵩明 鲘门 扬中 龙里北 舟山 洛阳 运城北 鞍山 西昌 邵阳北 绍兴 白山 三明 肇东 陵水 衡山西 嘉善 宜都 泰兴 泉州 汉口 东胜西 昌图西 锦州南 安阳东 怀化 黄南 亚龙湾 扬州 温州 南翔北 福安 金山北 永川东 安达 曲阜东 郑州西 天门 绍兴北 涪陵北 阳泉北 三亚 葫芦岛北 徐州 阳江 辽源 新泰 阿坝 孝感北 三穗 金寨 保山 高安 安阳 牟平 西双版纳 信阳 繁昌西 哈尔滨北 达州 新余 沈阳南 四平 扶余北 伊宁 郴州西 济源 水家湖 民权北 福鼎 如皋 奉化 全州南 安庆 太姥山 武汉 乐清 皮口 武昌 茂名 邯郸 资阳 马鞍山 三水南 泰安 包头东 衡阳东 南丰 仙桃西 安吉 罗源 山海关 平湖 惠州 资阳北 淄博 丹阳 莱州 巴东 关岭 盐城 锦州 格尔木 益阳 大英东 吉林 湛江 临安 襄汾西 渑池南 当涂东 辽阳 徐水 贺州 韶关 光明城 邯郸东 普安县 南江口 铜川 五龙背东 张家港 烟台南 萍乡北 青堆 长乐 江门 台州 衡水 湘潭北 闽清北 高邑西 盖州西 石柱县 潮汕 肇庆 泰康 邵东 湖州 余姚 平凉 宜宾 增城 沧州 都匀 防城港 鹰潭北 海东西 福田 余姚北 岳池 广州北 南安 蓬莱 瓦房店西 李石寨 葛店南 海安 无锡东 上饶 通辽 四会 桂林西 砀山南 兰州 滨海 龙口 绅坊 莱西 石林西 深圳 大连北 成都 上海西 孝感 杏树屯 德清 嘉兴

Copyright © 2016 phpStudy |