在 js中，当咱们须要重复使用一个字段，会将它定义为一个变量，在多个中央应用
在svg中，当咱们须要重复使用一个图形时，要怎么解决呢？
一、通过＜use＞&＜defs＞标签，在html中间接应用
应用形式：
- 将图形等放在
<defs>中提前定义好，并设置id（defs中可设置多个） - 用
<use>标签的xlink:href属性指定对应的 id - 留神，
defs中的内容并不会间接渲染，在应用时才会渲染
<svg> <defs> <polygon id="star" points="0 0 50 0 25 50" fill="blue" transform="scale(1)"></polygon> <!-- 多个平铺 --> <polygon id="test"></polygon> </defs> <use xlink:href="#star"></use></svg>二、也能够在js中生成援用，来看实例
后面03篇讲到，能够用js创立svg，同样的use也能够用js创立。间接来看一个综合实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>use标签的应用</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #001122; /* svg标签是内联元素，撑满了会有滚动条进去，不想要这个滚动条所以须要重置这两个值 */ line-height: 0; font-size: 0; } </style></head><body> <svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice"> <defs> <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon> </defs> <!-- 星星 --> <g id="star-group"></g> </svg> </body><script> // nameSpace var SVG_NS = 'http://www.w3.org/2000/svg' var XLINK_NS = 'http://www.w3.org/1999/xlink' var paper = document.querySelector('svg') renderStar() // 通过一个已有元素，生成它的援用: <use xlink:href="#star"></use> function use(origin) { var _use = document.createElementNS(SVG_NS, 'use') _use.setAttributeNS(XLINK_NS, 'xlink:href', '#' + origin.id) return _use } // 取得任意两个数 之间的 随机数 function random (min, max) { return min + (max - min) * Math.random() } // 渲染星空 function renderStar () { var starRef = document.getElementById('star') var starGroup = document.getElementById('star-group') var starCount = 500 var star while( starCount -- ) { // 生成star的援用 star = use(starRef) // 设置透明度 star.setAttribute('opacity', `${random(0.1, 0.5)}`) // 设置transform值（translate、scale之间无分号） // polygon外部如果应用transform，会在父级use变换的根底上，持续进行变换（没有笼罩，只是持续进行） star.setAttribute('transform', `translate(${random(-400, 400)}, ${random(-300, 300)})scale(${random(0.1, 0.5)})`) // 追加进去 starGroup.appendChild(star) } }</script></html>这样咱们就失去了一个星空~
三、defs的其余用法
defs中除了能够定义图形，也能够定义 突变成果 ，只是应用时就不通过use了