svg js动态插入use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- viewBox: 基于里面有几个元素, width height基于viewBox -->
<svg viewBox="0 0 1250 100" width="1000" height="100"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g id="path">
<path d="m0 0 L200 0 L250 50 L200 100 L0 100 Z" fill="green" />
</g>
<defs>
<g id="myPath">
<path d="m0 0 L50 50 L0 100 L200 100 L250 50 L200 0 Z" fill="green" />
</g>
</defs>
<use xlink:href="#path" x="0" y="0"></use>
</svg>
<script>
let svg = document.querySelector('svg')
for(let i = 0; i < 4; i++){
let use = document.createElementNS(
"http://www.w3.org/2000/svg",
"use"
)
use.setAttributeNS(
"http://www.w3.org/1999/xlink",
"href",
"#myPath"
);
use.setAttribute("x", 230*(i+1))
use.setAttribute("y", 0)
svg.appendChild(use)
}
</script>
</body>
</html>