svg08——＜use＞&＜defs＞标签创建图形引用 svg08——＜use＞&＜defs＞标签创

在 js中，当我们需要重复使用一个字段，会将它定义为一个变量，在多个地方使用
在svg中，当我们需要重复使用一个图形时，要怎么处理呢？

一、通过＜use＞&＜defs＞标签，在html中直接使用使用方式：

将图形等放在中提前定义好，并设置 id（defs中可设置多个）
用标签的 xlink:href 属性指定对应的 id
注意，defs 中的内容并不会直接渲染，在使用时才会渲染

文章图片

二、也可以在js中生成引用，来看实例前面03篇讲到，可以用js创建svg，同样的use也可以用js创建。直接来看一个综合实例

use标签的使用 - 锐客网html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #001122; /* svg标签是内联元素，撑满了会有滚动条出来，不想要这个滚动条所以需要重置这两个值 */ line-height: 0; font-size: 0; }

这样我们就得到了一个星空~