在 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了