问答详情
源自：6-1 use标签创建图形引用

就是出不来结果 必须请教老师了

<!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>


提问者：洪炉百炼生 2014-11-22 20:33

个回答

  • vivian_zhang
    2020-09-06 16:41:56
    已采纳

    代码里 var XLINK_NS = 'http://wwww.w3.org/1999/xlink';  多了个w

    1
  • 何烨坪
    2015-06-08 23:18:08

    这这么解决呢？我也有疑问

    0
  • zdddrszj
    2014-12-16 10:58:38

    我上边说错了，是你代码中

    var XLINK_NS = 'http://wwww.w3.org/1999/xlink';

    这句话写错了，我调试是可以的。

    1
  • 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>标签

    0