SVG <g>、<defs>、<symbol>和<use>元素详解

2017-10-15 09:49| 作者: admin| 查看: 8145| 评论: 0|来自: 蚂蚁部落

原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。

实际应用中，可能需要多次重复出现一个相同的图形。

最不明智的解决方案是每次都绘制一个全新的图形，较好的解决方案是重复使用一个图形。

下面通过代码实例分步介绍一下图形重复使用的相关内容。

一.<g>元素:

g是group（分组）的缩写。

<g>元素通常用来对相关图形元素进行分组，以便统一操作，比如旋转，缩放或者添加相关样式等。

[HTML] 纯文本查看 复制代码运行代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

svg {

  border:1px solid red;

  margin:100px;

}

</style>

</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"

        width="300" height="200">

    <g id="group" fill="red">

      <rect x="10" y="10" width="100" height="100" />

      <rect x="120" y="10" width="100" height="100" />

    </g>

  </svg>

</body>

</html>

上面代码将两个矩形元素用<g>元素分组，就可以对它们统一操作，比如旋转或者缩放等。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

svg {

  border:1px solid red;

  margin:100px;

}

</style>

</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"

        width="300" height="200">

    <g id="group"

       transform="rotate(20)"

       fill="red">

      <rect x="10" y="10" width="100" height="100" />

      <rect x="120" y="10" width="100" height="100" />

    </g>

  </svg>

</body>

</html>

上面代码对<g>进行旋转操作，也就是对此分组的进行整体旋转，分组内图形元素的相互关系会保持。

二.使用<use>元素进行重用:

<use>实现SVG现有图形的重用，可以重用单个SVG图形元素，也可以重用<g>定义的组元素。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

svg {

  border:1px solid red;

  margin:100px;

  width:500px;

  height:500px;

}

</style>

</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg"  version="1.1">

    <g id="group" fill="red" >

      <rect x="10" y="10" width="100" height="100"/>

    </g>

    <use id="one" x="0" y="110" xlink:href="#group"/>

    <use id="two" x="0" y="220" xlink:href="#group" stroke="black" stroke-width="2"/>

  </svg>

</body>

</html>

特别说明:为了便于演示，<g>分组中只保留了一个矩形元素。

下面对代码做一下分析:

（1）.<g>元素可以直接显示。

（2）.<use>元素可以使用xlink:href属性（属性值是#+g元素id）多次引用<g>元素。

（3）.被引用后创建的新元素是最初元素的一个副本；新元素会继承最初元素的样式、旋转、缩放等特性。

（4）.不能在新元素中覆盖初始元素的样式（例如描边和填充）。

（5）.x和y属性规定新元素的坐标原点。

最后一条需要着重说明一下，以上面代码的第一个<use>为例:

[XML] 纯文本查看 复制代码

?

1

<use id="one" x="0" y="110" xlink:href="#group" />

等同于如下代码:

[XML] 纯文本查看 复制代码

?

1

<use id="one" transform="translate(0, 110)" xlink:href="#group" />

位移是以初始元素的坐标为参考，所以新元素的左上角位置是:初始x+新x和初始y+新y。

当然创建新的元素也会形成一个新的当前用户坐标系，这个新坐标系的原点位置是在之前原点位置基础上累加x和y值，上面的代码中，初始元素的坐标系原点是（0,0），那么新元素所在的用户坐标系原点(0,0)在初始元素用户坐标系的（0,110）处。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

svg {

  border:1px solid red;

  margin:100px;

  width:500px;

  height:500px;

}

</style>

</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <g id="group" fill="red">

      <rect

            x="90" y="110"

            width="100" height="100" />

    </g>

 

    <use id="one"

         transform="translate(0 110) rotate(10 0 0)"

         xlink:href="#group" />

 

    <rect id="rect"

          fill="blue"

          x="90" y="220"

          width="110" height="110"

          transform="rotate(10 0 110)"

          fill-opacity="0.5"

          />

  </svg>

</body>

</html>

上面代码的表现可以说明一切，下面简单做一下介绍:

[XML] 纯文本查看 复制代码

?

1

2

3

<use id="one"

     transform="translate(0 110) rotate(10 0 0)"

     xlink:href="#group" />

translate(0 110)可以将坐标原点从初始元素坐标系的(0,0)移动到初始元素坐标系的（0,110），在当前坐标系当然是(0,0)。

rotate(10 0 0)设置元素旋转角度10，围绕当前用户坐标系的原点（位于初始元素坐标系的（0,110）处）旋转。

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

6

7

<rect id="rect"

      fill="blue"

      x="90" y="220"

      width="110" height="110"

      transform="rotate(10 0 110)"

      fill-opacity="0.5"

      />

上面代码规定矩形的坐标是（90，220），也就是在都不旋转的情况下会和<use>的左上角重合。

transform="rotate(10 0 110)" 旋转10度，旋转的中心点是在初始元素坐标系的（0,110）位置。

更多内容可以参阅以下三篇文章:

（1）.SVG 坐标系统详解一章节。

（2）.SVG transform用法详解一章节。

（3）.SVG transform坐标变化深入理解一章节。

三.<defs>重用已存储元素:

<defs>可以定义我们不想直接显示的内容。

<g>分组定义的内容直接会显示，所以<defs>在使用的时候会有更大的灵活性。

<g>和<defs>定义的图形元素的样式在被重用的新元素中都是无法被改变的；由于<g>中的内容会直接显示，通常需要给元素一些样式，所以会对应用带来一些障碍；<defs>内部定义的元素不会直接显示，可以不用事先定义样式，而是在使用<use>实例化的时候再定义。代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

svg {

  border:1px solid red;

  margin:100px;

  width:500px;

  height:500px;

}

</style>

</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <defs>

      <rect

            id="defs"

            x="90" y="110"

            width="100" height="100" />

    </defs>

 

    <use id="ant"

         transform="translate(0 110) rotate(10 0 0)"

         fill="red"

         xlink:href="#defs" />

    <rect id="rect"

          fill="blue"

          x="90" y="220"

          width="110" height="110"

          transform="rotate(10 0 110)"

          fill-opacity="0.5" />

  </svg>

</body>

</html>

与<g>一个明显的区别是，<use>引用的是内部元素的id。

可以认为<defs>是为了定义初始不可见且可重用的元件，而<g>是一个初始可见且本身就是一个元件（当然具有分组功能）。

三.<symbol>元素的使用:

<symbol>兼具<g>的分组功能和<defs>初始不可见的特性。

<symbol>能够创建自己的视窗，所以能够应用viewBox和preserveAspectRatio属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

svg {

  border:1px solid red;

  margin:100px;

  width:500px;

  height:500px;

}

</style>

</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <symbol id="symbol" viewBox="0 0 250 250">

      <rect

            x="90" y="110"

            width="100" height="100" />

    </symbol>

 

    <use id="ant"

         transform="translate(0 110) rotate(10 0 0)"

         fill="red"

         xlink:href="#symbol" />

    <rect id="rect"

          fill="blue"

          x="90" y="220"

          width="110" height="110"

          transform="rotate(10 0 110)"

          fill-opacity="0.5" />

 

  </svg>

</body>

</html>

更多内容可以参阅下面几篇文章:

（1）.SVG transform坐标变化深入理解一章节。

（2）.SVG viewbox和preserveAspectRatio详解一章节。

•SVG g、defs、symbol和use元素详解相关推荐

  1. html里的section可以设置id,html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  2. Python精讲：在Python中添加和删除集合元素详解

    欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<在Python中添加和删除集合元素详解>.本知识点主要讲的是添加和删除元素,包括:在Python中向集合里面添加元素可以使用 ...

  3. Html块级元素详解

    Html块级元素详解 *块级元素 常见的有:div , table, tr , from , ul ,li ,ol ,h1~h6, p 盒子 div 标签 <div class="bq ...

  4. HTML5中section由什么组成,html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  5. 细品RibbonX(31)：buttonGroup元素详解

    细品RibbonX(31):buttonGroup元素详解 资料整理来自于论坛 完整版下载地址:http://download.csdn.net/download/nodeman/10264659 L ...

  6. html5中的行高元素,详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

    关于元素的一些属性 在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性.特别是一下这些: 尺寸相关:offsetHeig ...

  7. XSD标准架构-----xsd:element 元素详解

    声明一个元素. <elementabstract = Boolean : falseblock = (#all | List of (extension | restriction | subs ...

  8. useradd -g mysql mysql_Linux —— useradd -g mysql mysql解析及useradd详解

    当我们在不通过yum(CentOS).apt-get(Ubuntu)来安装MySQL的时候,通常执行以下命令来创建一个用户名为mysql 的用户并加入mysql用户组: [root@localhost ...

  9. Html5中新增的表单元素详解

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. •datalist •keygen •output datalist 元素 datalist 元素规定输入域的选项列表.列表是 ...

  10. html中的行内标签吗,HTML标签中行内元素和块级元素详解

    本文主要和大家详细介绍了HTML常用的标签中行内元素和块级元素,需要的朋友参考下吧,希望能帮助到大家. 块元素(block element) HTML标签分类明细 * address - 地址 * b ...

最新文章

  1. grep 的特殊使用
  2. 在python程序中的进程操作
  3. python【力扣LeetCode算法题库】面试题62- 圆圈中最后剩下的数字（约瑟夫环）
  4. 24. [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
  5. python代码显示进度条 tqdm
  6. 1034. 有理数四则运算(20)-PAT乙级真题
  7. 用C#实现文件夹拷贝
  8. vue检测是不是360浏览器兼容模式_Vue项目兼容IE11
  9. MSDOS设置代码页
  10. 独孤木专栏Delayed Project（中）
  11. ZigBee Routing Tables 路由表
  12. Unity 科大讯飞语音唤醒
  13. ~ 如何用C++自制一个日麻游戏 ~（一）大体框架构建 § 2 数据结构
  14. 【Java】装箱拆箱
  15. Android Telephony框架结构简析
  16. Docker系列之常用命令操作手册
  17. MySQL 聚集索引(InnoDB)和 非聚集索引(MyISAM) 精讲～两张图彻底搞懂
  18. 面对流氓HR，新人该注意什么
  19. mysql中DQL操作
  20. 玩转Docker实战篇！使用Docker搭建Sinatra Web程序，附加介绍容器关联(Docker Networking、Docker链接)

热门文章

  1. 数据压缩_任务五_预测误差均方值推导及最小二乘法
  2. 从零开始iOS8编程【HelloWorld】
  3. 基于CST电磁仿真软件的7-10GHz的微带带通滤波器的设计
  4. WORD图片无法同时选中/WORD图片无法组合
  5. 麻了！35岁奥地利总理辞职当码农
  6. 范德堡计算机科学硕士,美国范德堡大学计算机科学专业怎么样？
  7. 学术英语阅读与写作6：讨论和结论discussion and conclusion
  8. 计算机图形学必读的10本书
  9. 怎样用计算机编码出文字,计算机汉字编码主要有哪些方式
  10. c语言 dct变换,汇编实现的DCT变换算法