svgdr教程·实例化 use

马黑黑 · 发表于 2024-11-22 19:19

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

实例化 use

svg中的 <use> 标签用于实例化由 <g> 标签或 <symbol> 标签所设计的图案，类似于JS对HTML元素的深度克隆，即能将 <g> 标签和 <symbol> 标签里的含子内容在内的所有可视内容完备呈现。我们知道，g分组和symbol模板自身不在DOM中渲染，所以，<use> 标签是在实例化它们而后在自己设定的位置上呈现出来，可以实现单个或多个实例化。use标签还可以拥有自己的尺寸，但仅在实例化带有 viewBox 属性的 symbol 模板时有效。

指令：use()

参数：href, x, y, width, height

语法：use(href, x, y, width, height)

参数说明：

① herf - 必须，字符型，use标签绑定的g或symbol标签的id，按照规范，id需要前缀 #，例：#Id
② x - 可选，use左上角X坐标值，数值或字符型百分比，缺省时默认为0
③ y - 可选，use左上角Y坐标值，其余同上
④ width - 可选，use宽度，数值或百分比，仅在实例化自带 viewBox 属性的 symbol 模板时有效
⑤ height - 可选，use高度，其余同上

下面我们来绘制简易的小鸟头部：一个大一点的圆充当头部轮廓、一个小小的圆做眼睛，一个折线模拟喙即鸟嘴，它们都放入g标签，g标签又放入defs标签。然后用一个for循环，一口气实例化6个由g标签组织起来的图案。先看效果：

以下是 svgdr 绘制代码：

dr.defs('defs'); //创建defs标签
dr.g('g1').addTo('defs'); //创建g分组标签并加入defs标签中
dr.circle(20, 20, 20, 'lightblue', '#333', 2).addTo('g1'); //大圆 ：头部轮廓
dr.circle(30, 15, 3, '#333').addTo('g1'); //小圆 ：眼睛
dr.polyline('90 15, 40 20, 85 25','none', '#333', 2).addTo('g1'); //折线 ：喙
//实例化6个g1分组
for(var i = 0; i < 6; i++) {
	dr1.use('#g1', 20 + i * 120, 30);
};

再看看SVG代码：

以上是实例化g分组的演示。接着看看use实例化symbol模板的实例：

svgdr 绘制代码：

dr.symbol('symb', '0 0 90 90');
dr.polyline('80 15,50 25, 80 25', 'none', 'black', 2).addTo('symb');
dr.circle(25, 25, 25, 'silver').addTo('symb');
dr.circle(40, 20, 3, 'black').addTo('symb');
dr.use('#symb', 20, 20, 100, 100);
dr.use('#symb', 150, 20, 200, 200);
dr.use('#symb', 400, 20, 300, 300);

svgdr绘制代码生成的SVG代码：

需要特别注意：① use标签的width和height属性要起作用需要一个前提，那就是 symbol 设置有 viewBox 属性；② href 属性原先写成 xlink:href，该写法已被 href 写法取代，虽然人们还习惯使用 xlink:href；③ use 标签 herf 属性的值指向被实例化的 symbol 标签，其值由 #id 构成；④ symbol 标签可以不用作为 defs 标签的子标签存在，它可以自成一家，放在svg标签内的任何地方。⑤ 和 g 分组一样，一个svg里面可以有多个symbol标签。

返回目录