SVG中的'defs' and 'use'-可复用的图元定义
在下一个示例中,我使用了defs中的元素之前,定义了如何去展现图元。
<?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 viewBox = "0 0 1000 1000" version = "1.1">
<defs>
<!-- A circle of radius 200 -->
<circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
<!-- An ellipse (rx=200,ry=150) -->
<ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
</defs>
<use x = "100" y = "100" xlink:href = "#s1"/>
<use x = "100" y = "650" xlink:href = "#s2"/>
</svg>
请注意以下代码
<circle id="s1"...
这行代码定义了一个圆,并且设置了他的id属为s1. 在后面的代码中, 可以使用这个ID来引用原来定义好的圆。 使用use标签,并在标签中设置"xlink:href"属性(XLINK:HREF =“#S1线”)。 请注意: “use”标签中还设置了x和y的属性, 这两个属性会设置到被添加到的原始定义中(即,在例子中,圆的cx和cy)。
SVG中的'defs' and 'use'-可复用的图元定义的更多相关文章
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...
- 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素
本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...
- 使用SVG中的Symbol元素制作Icon【摘转】
以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...
- [翻译svg教程]svg中的circle元素
svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...
- [翻译svg教程]svg 中的g元素
svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...
- 在svg中的line和path根据路径返回x,y
由于path有自带的api可获得总长度,和某个长度返回的坐标. var total = d.path.getTotalLength();//返回总长度 var point = d.path.getPo ...
- 在 SVG 中添加交互性
原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgint/ SVG 中的交互性可以分为三个领域 -- 链接.事件和脚本.本文将依次讨论这三个领域. ...
- 动态插入图片到 svg 中
动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...
- Snap.svg中transform旋转值的“r+数组”表现形式
Snap.svg中transform的值还可以写为类似以下这种形式: transform:'r'+[100,[50,50]]; 这种写法的意思是,让元素以(50,50)为旋转中心点,然后旋转100度. ...
随机推荐
- (spring-第13回【IoC基础篇】)PropertyEditor(属性编辑器)--实例化Bean的第五大利器
上一篇讲到JavaBeans的属性编辑器,编写自己的属性编辑器,需要继承PropertyEditorSupport,编写自己的BeanInfo,需要继承SimpleBeanInfo,然后在BeanIn ...
- Discuz 插件制作之后台常用函数详解
目录 showsetting()表单显示 cpmsg()提示消息 showformheader()创建表单头 showformfooter()创建表单尾 showtableheader()创建表格头 ...
- iOS常用正则表达式验证(手机号、密码格式、身份证号等)
#import @interfaceUtils : NSObject #pragma 正则匹配手机号 + (BOOL)checkTelNumber:(NSString*) telNumber; #pr ...
- HDU 5253 最小生成树(kruskal)+ 并查集
题目链接 #include<cstdio> #include<cmath> #include<cstring> #include<algorithm> ...
- AD管理命令
repadmin /showrepl 显示复制协议 dcdiag /test:dns
- 安装webmin
wget http://nchc.dl.sourceforge.net/project/webadmin/webmin/1.740/webmin-1.740.tar.gz 解压缩文件,命令是:tar ...
- 7、SQL基础整理(子查询)
子查询 (用来进行两个或以上表之间的查询) 1.首先新建一个bumen表和一个haha表,填充数据 2.利用两表进行子查询: --部门人数大于5的部门中最大年龄的人的信息--- select MAX( ...
- Jquery 中toggle的用法举例
toggle用法是使得两个以上的方法交替出现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- linux性能监控基础命令
压力测试监控下系统性能方法之一 #top 该命令监控的是进程的信息 看图逐行意义 top:执行命令的之间 up:已经执行了277天 2users:目前有两个使用者,使用#who可以查看具体的使用者详情 ...
- 【转】论创新工场、职业发展、offer如何比较选择、移动互联网
大纲:一.缘由.概述二.创新工场的模式三.职业发展道路的影响因素四.职业选择的几个小问题五.李开复的移动互联网和我眼中的移动互联网六.再见和祝福 一.缘由.概述1.缘由 前两周,有个师弟 ...