defs、g 和 symbol

<defs>、<g> 和 <symbol> 属于功能性容器标签，此类元素还有 <marker>、<pattern> 等，它们在别的章节讲解。

一、defs隔离 和 g分组

指令：① defs() ② g()

参数：① id ② id

语法：① defs(id) ② g(id)

defs() 指令的参数 id 为 <defs> 标签的id标识符。在SVG中，defs标签一般不需要id属性，svgdr使用id是为了方便操作。在SVG，defs是 definitions（定义）的缩写，defs标签用以定义随后将被引用、复用的分组（g）、图案（pattern）、渐变（*Gradient）、路径（path）等等，defs标签装载这些东西起到隔离（defences）的作用，它们不会被显示出来，直到被其他元素（如use）通过特定方式引用。defs里面所安置的东西各单位拥有自己的id作为被引用的依据（而不是defs的id），同时它们可以被反复引用及复用。

g() 指令的参数 id 为 <g> 的 id标识符。g源自 group（组）一词，g元素故而用于分组，SVG中可以拥有多个g元素，每个g元素可将一个或多个设计放入其中，便于管理和引用、复用；g元素需要时可以作为defs标签的子元素，也可以独立存在，需要注意的是，当g分组不放入defs标签中，它所包裹的设计是可以渲染的，反之，若放入了defs标签，则只有引用它即将其实例化时方能呈现。

以下例子展示：① 在 svgdr 中创建defs标签，用于装载待引用、复用的各单元的设计；② 创建一个g分组g1，将其加入到defs标签内，再绘制一个椭圆加入到g分组作为被引用、复用的具体内容；③ 通过两个use标签将g1分组的形状实例化渲染出来并让它们组合成一个美丽的图案；④ 创建另一个分组g2但不加入defs标签，重复步骤三实例化g1并将实例化的图案加入到g2，这两个加入g2的g1实例化得以渲染，因为g2没有加入defs标签；⑤ 将g2实例再实例化三次，让这三个图案展现在svg都右边。

以上图案的 svgdr 绘制代码：

dr.defs('defs'); // ① 创建defs标签
dr.g('g1').addTo('defs'); // ② 创建 id='g1' 的g分组标签并加入 defs
dr.ellipse(100, 100, 90, 35, 'lightblue').addTo('g1'); // ② 画椭圆并加入到g1（椭圆不显示）
// ③ 使用两个user标签在原地组合成图案
dr.use('#g1');
dr.use('#g1').transform('rotate(90 100 100)');
// ④ 使用两个user标签移到（50,200）坐标点组合成图案
dr.g('g2'); //创建 id="g2" 的g分组，不加入defs，装载一下两个use示例组合成图案，该图案显示
dr.use('#g1', 50, 200).addTo('g2');
dr.use('#g1', 50, 200).transform('rotate(90 150 300)').addTo('g2');
//⑤ 实例化 g2 g分组三次（右侧三个图案）
dr.use('#g2', 250, -100).transform('rotate(30, 400, 200)');
dr.use('#g2', 550, -200).transform('rotate(60, 700, 100)');
dr.use('#g2', 550, 0).transform('rotate(120, 700, 300)');
	

这些绘制代码所生成的SVG代码：

二、symbol 图形模板

指令：symbol()

参数：id, viewbox

语法：symbol(id, viewbox)

参数解释：

① id - <symbol> 标签id标识符，字符型
② viewBox - <symbol> 标签视口数据，字符型，缺省默认与symbol内元素总体占位宽高同

<symbol> 标签用于定义图形模板，里面可以包含各类图案组成一个有机整体留待后续引用、复用。注意，① 它所组织的图案是一个整体，而且是同一个 <symbol> 标签唯一输出的图案，通过use实例化才得以呈现，use引用、复用它的依据是 symbol 自身的 id 标识符。symbol标签和defs是兄弟关系同是svg的儿子，可以放在svg代码流中任何地方；② <symbol> 标签可以设置自身体系的 viewBox 视口，这意味着 use 实例化 symbol 时可以设置 width（宽）和 height（高）尺寸，这一点与前述的g分组不同：g分组的设计被use引用、复用时以其实际尺寸呈现，对use设置宽高无效。

下面的例子演示：先创建symbol标签，再绘制一个圆加入到symbol标签中，然后使用use标签实例化若干个symbol所定义的图形、渲染出来：

svgdr 绘制代码：

dr.symbol('sb', '0 0 10 10'); //创建 id="sb"的symbol标签，有viewBox
dr.circle(5, 5, 4, 'plum').addTo('sb'); //按照symbol的viewBox的规范画圆
dr.use('#sb'); //默认方式实例化symbol ：中间大圆
//下面的实例化均设置位置、尺寸
dr.use('#sb', 0, 0, 200, 200); //左上角 200*200
dr.use('#sb', 0, 300, 100, 100); //左下角 100*100
dr.use('#sb', 560, 0, 240, 240); //右上角 240*240
dr.use('#sb', 700, 310, 80, 80); //右下角 80*80
	

生成的SVG代码：

帖子《青春舞曲》是一个实例化 symbol 做小播的应用，里面 symbol 的 viewBox 设置和其内部元素的设计以及动画的加持值得探究。

返回目录