一个svg星空小Demo,把浏览器
里的Elements复制一份到另一个
文件里正常显示,当前的就不行,
求解答。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background: #001122;
        line-height: 0;
        font-size: 0;
    }
</style>
<body><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="main-svg"
     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="#ff0"></polygon>
    </defs>
    <g id="star-group">
    </g></svg></body>
<script src="jquery-3.3.1.js"></script>
<script src="$utils.js"></script>
<script>
    let $svg = $('#main-svg');
    var starCount = 500;
    renderStar();    /**
     * 使用星星单体
     * @param $star
     * @returns {jQuery|HTMLElement}
     */
    function use($star) {
        var _use = $.addSVGel('use');
        _use[0].setAttributeNS($.XLINK_NS, 'xlink:href', '#star');
        return _use;
    }
    function renderStar() {
        let $star = $('#star');
        let $star_g = $('#star-group');        for (let i = 0; i < 10; i++) {
            $star = use($star);            $star.attr({
                'transform': 'translate(' + $.range([-400, 400]) + ',' + $.range([-300, 300]) + ")"
            });
            $star_g.append($star);
        }
    }</script>
</html>
$utils里的自定义方法:
/**
 *
 * @param tagName
 * @returns {jQuery|HTMLElement}
 */
$.addSVGel = function (tagName) {
    return $(document.createElementNS($.SVG_NS, tagName));
};
/**
 * 获取范围随机数:如 $.getRange([1,9])
 * @param range
 * @returns {number}
 */
$.range = function (range) {
    var max = Math.max(range[0], range[1]);
    var min = Math.min(range[0], range[1]);
    min = min - 1;
    var deta = max - min;
    return min + Math.ceil(Math.random() * deta);
};
/**
 * 返回svg的命名空间,老是复制粘贴怪麻烦,写个函数呗
 * @returns {string}
 * @constructor
 */
$.SVG_NS = function () {
    return 'http://www.w3.org/2000/svg';
};$.XLINK_NS = function () {
    return 'http://www.w3.org/1999/xlink';
};