為什么實現不了,求大神指點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>浪漫星空</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
??? html,body{
??????? margin: 0;
??????? padding: 0;
??????? width: 100%;
??????? height: 100%;
??????? background: #001122;
??????? line-height: 0;
??????? font-size: 0;
??? }
</style>
</head>
<body>
??? <svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
??? <defs>
?????? <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" style="fill:white;"></polygon>
??? </defs>
??? <g id="star-group"></g>
??? </svg>
</body>
<script type="text/javascript">
?
var SVG_NS = 'http://www.w3.org/2000/svg';
var XLINK_NS = 'http://wwww.w3.org/1999/xlink';
?
var paper = document.querySelector('svg');
?
renderStar();
?
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;
??? console.log(starGroup);
??? var star;
??? while(starCount--){
??????? star = use(starRef);
??????? star.setAttribute('opacity',random(0.1,0.4));
??????? star.setAttribute('transform','translate('+random(-400,400)+','+random(-300,50) + ') scale('+random(0.1,0.6)+')');
??????? starGroup.appendChild(star);
??? }
}
</script>
</html>
2020-09-06
代碼里 var?XLINK_NS?=?'? 多了個w
2015-02-12
碼代碼勤做注釋<!---->