SVG defs元素
来源:互联网 发布:服务器监控软件 编辑:程序博客网 时间:2024/05/21 07:57
摘自:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506132029.html
SVG的<defs>
元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组,并用<defs>
元素来定义它,然后你就可以在SVG图像中将它当做简单图形来重复使用。看下面的例子
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <g> <rect x="100" y="100" width="100" height="100" /> <circle cx="100" cy="100" r="100" /> </g> </defs></svg>
在<defs>
元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>
元素来引入它们。如下面的代码所示:
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs>
要引用<g>
元素,必须在<g>
元素上设置一个ID,通过ID来引用它。<use>
元素通过xlink:href
属性来引入<g>
元素。注意在ID前面要添加一个#
。
在<use>
元素中,通过x
和y
属性来指定重用图形的显示位置。注意在<g>
元素中的图形的定位点都是0,0
,在使用<use>
元素来引用它的时候,它的定位点被转换为<use>
元素x
和y
属性指定的位置。
下面是上面代码的返回结果:
上面SVG图像中绿色的圆点并不是示例代码的一部分。它们是用来显示2个<use>
元素的x
和y
坐标的。
哪些元素可以被定义为defs中的元素呢?
你可以将下面的元素放入到<defs>
元素中使用:
- 任何图形元素,如:
rect
,line
等 g
symbol
SVG symbol元素
SVG <symbol>
元素用于定义可重复使用的符号。嵌入在<symbol>
元素中的图形是不会被直接显示的,除非你使用<use>
元素来引用它。
下面是一个使用<symbol>
元素的简单例子:
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100"> <symbol id="shape2"> <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/> </symbol> <use xlink:href="#shape2" x="50" y="25" /></svg>
<symbol>
元素需要一个ID号,以便以被<use>
元素引用。
一个<symbol>
元素可以有preserveAspectRatio
和viewBox
属性。而<g>
元素不能拥有这些属性。因此相比于在<defs>
元素中使用<g>
的方式来复用图形,使用<symbol>
元素也许是一个更好的选择。
SVG use元素
SVG <use>
元素可以在SVG图像中多次重用一个预定义的SVG图形,包括<g>
元素和<symbol>
元素。被重用的图形可以在定义<defs>
的内部(图形将不可见直到使用use来引用它)或外部。
下面是一个使用<use>
元素的例子:
<svg> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <use xlink:href="#shape" x="200" y="50" /> </svg>
上面的例子显示的是在<defs>
元素中定义的<g>
元素。
要引用<g>
元素,必须给它一个ID号,通过ID号来引用它。
下面是上面代码的返回结果:
我们也可以引用不在<defs>
元素中的图形。<use>
元素可以引用SCG图像中的任何元素,只要这个元素有一个唯一的ID号,例如:
<svg width="500" height="110"> <g id="shape2"> <rect x="0" y="0" width="50" height="50" /> </g> <use xlink:href="#shape2" x="200" y="50" /> </svg>
这个例子在<g>
元素中定义了一个<rect>
元素。然后通过<use>
元素来引用这个<g>
元素。它返回的结果如下面所示:
注意这里原始图形和复用的图形都会被显示。因为原始的图形并没有定义在<defs>
或<symbol>
元素中。所以它是可见的。
你可以为引用的图形设置CSS样式。你可以在<use>
元素中使用style
属性来为复用的图形设置它的样式。例如:
<svg width="500" height="110"> <g id="shape3"> <rect x="0" y="0" width="50" height="50" /> </g> <use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/> <use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/> </svg>
注意上面的代码中,原始的图形并没有设置样式,它将是默认的样式(黑色)。
返回SVG教程目录
相关阅读:
- SVG基础 | 绘制SVG连接标记MARKERS
- SVG基础 | SVG IMAGE 元素
- MDN SVG defs
- MDN SVG symbol
- MDN SVG use
- SVG defs元素
- SVG DEFS元素、SYMBOL元素和USE元素
- SVG 复用(defs、symbol、use)
- SVG中的'defs' and 'use'-可复用的图元定义
- SVG 元素
- SVG 元素
- SVG基础 | SVG PATH 元素
- Text-svg元素详解
- Text-svg元素详解
- SVG中的动画元素
- SVG path 元素详解
- SVG path 元素详解
- [交互式SVG组件]SVG元素拖拽
- SVG主要元素和属性
- SVG主要元素和属性
- SVG主要元素和属性
- SVG元素缩放的问题
- SVG相关-常见框架元素
- android基础学习6——intent实现数据传递
- Spring Boot学习笔记-整合Jsp (二)
- Android开发命名规范和编码规范
- 关于tpshop5的单字母函数M,D。
- 在Ubuntu 14.04 LTS中添加和删除PPA软件源
- SVG defs元素
- 使用javabean把小写金额转换成大写金额
- python os.path模块常用方法详解
- 基于proteus的51单片机仿真实例五十七、定时器/计数器T0的定时实例
- 操作系统开发技术(Linux内核编译)-新系统调用设计实验
- 0430-div和span标签
- 热修复及lua脚本
- 二叉树的基本操作
- WebService开发