In js, when we need to reuse a field, it will be defined as a variable and used in multiple places
In svg, when we need to reuse a graphic, how to deal with it?
1. Use the <use> & <defs> tag directly in html
How to use:
- Put the graphics in
<defs>to define in advance, and setid(multiple settings can be set in defs) - Use
xlink:href<use>tag to specify the corresponding id - Note
defswill not be rendered directly, and will only be rendered when used
<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>
Two, you can also generate references in js, look at the examples
As mentioned in previous article 03, svg can be created with js, and the same use can also be created with js. Let's look at a comprehensive example directly
<!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>In this way we get a starry sky~
Three, other uses of defs
In addition to defining the graphics in defs, you can also define the gradient effect, but you will not pass the use when you use it.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。