就是出不来结果 必须请教老师了
来源：6-1 use标签创建图形引用
洪炉百炼生
2014-11-22 20:33
<!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>
写回答
关注
6回答
-
- vivian_zhang
- 2020-09-06 16:41:56
代码里 var XLINK_NS = 'http://wwww.w3.org/1999/xlink'; 多了个w
-
- 慕少1329861
- 2022-04-08 23:27:16
代码做的正确，是有什么问题吗。
-
- 幕布斯9266291
- 2022-04-03 01:06:00
这个是针对段落的，并不是对所有元素都有效
-
- 何烨坪
- 2015-06-08 23:18:08
这这么解决呢？我也有疑问
-
- zdddrszj
- 2014-12-16 10:58:38
我上边说错了，是你代码中
var XLINK_NS = 'http://wwww.w3.org/1999/xlink';
这句话写错了，我调试是可以的。
-
- zdddrszj
- 2014-12-16 09:16:49
<svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"> <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" style="fill:white;"></polygon> <g id="star-group"></g> </svg>
注意：不要用<defs></defs>标签
走进SVG
SVG是HTML5 中矢量图的标记语言，学习后掌握更多的干货
52520 学习 · 213 问题
相似问题