共计 1982 个字符，预计需要花费 5 分钟才能阅读完成。
在 js 中，当咱们须要重复使用一个字段，会将它定义为一个变量，在多个中央应用
在 svg 中，当咱们须要重复使用一个图形时，要怎么解决呢？
一、通过
应用形式：
- 将图形等放在
<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 了
咱们下一篇一起来学习 突变
正文完
