这是要打开的html1:本目录下引用了：jquery-3.3.1.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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>
///////////////////////////////////自定义方法START-----------------------------
/**
* 返回svg的命名空间,老是复制粘贴怪麻烦,写个函数呗
* @returns {string}
* @constructor
*/
$.SVG_NS = function () {
return 'http://www.w3.org/2000/svg';
};
$.XLINK_NS = function () {
return 'http://www.w3.org/1999/xlink';
};
/**
* 获取范围随机数：如 $.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);
};
/**
*
* @param tagName
* @returns {jQuery|HTMLElement}
*/
$.addSVGel = function (tagName) {
return $(document.createElementNS($.SVG_NS, tagName));
};
/////////////////////////////////////////////////////////////自定义方法END-----------------------------
let $svg = $('#main-svg');
var starCount = 500;
let $star_g = $('#star-group');
renderStar();
function renderStar() {
for (let i = 0; i < 10; i++) {
var $use = $.addSVGel('use');
$use[0].setAttributeNS($.XLINK_NS, 'xlink:href', '#star');
$use.attr({
'transform': 'translate(' + $.range([-400, 400]) + ',' + $.range([-300, 300]) + ")"
});
$star_g.append($use);
}
}
</script>
</html>结果无显示，然后把Chrome浏览器下的审查元素的内容全拷贝，粘贴到另一个文件夹：copy.html,
却能显示，
理论上Chrome浏览器下的审查元素不就是当前浏览器渲染的dom树吗?为什么两次不一样。
copy.html：
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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">
<use xlink:href="#star" transform="translate(-351,-208)"></use><use xlink:href="#star" transform="translate(-329,76)"></use><use xlink:href="#star" transform="translate(-179,144)"></use><use xlink:href="#star" transform="translate(-117,128)"></use><use xlink:href="#star" transform="translate(77,183)"></use><use xlink:href="#star" transform="translate(-296,-75)"></use><use xlink:href="#star" transform="translate(29,64)"></use><use xlink:href="#star" transform="translate(245,-236)"></use><use xlink:href="#star" transform="translate(220,73)"></use><use xlink:href="#star" transform="translate(-276,-54)"></use></g>
</svg>
<script src="jquery-3.3.1.js"></script>
<script>
///////////////////////////////////自定义方法START-----------------------------
/**
* 返回svg的命名空间,老是复制粘贴怪麻烦,写个函数呗
* @returns {string}
* @constructor
*/
$.SVG_NS = function () {
return 'http://www.w3.org/2000/svg';
};
$.XLINK_NS = function () {
return 'http://www.w3.org/1999/xlink';
};
/**
* 获取范围随机数：如 $.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);
};
/**
*
* @param tagName
* @returns {jQuery|HTMLElement}
*/
$.addSVGel = function (tagName) {
return $(document.createElementNS($.SVG_NS, tagName));
};
/////////////////////////////////////////////////////////////自定义方法END-----------------------------
let $svg = $('#main-svg');
var starCount = 500;
let $star_g = $('#star-group');
renderStar();
function renderStar() {
for (let i = 0; i < 10; i++) {
var $use = $.addSVGel('use');
$use[0].setAttributeNS($.XLINK_NS, 'xlink:href', '#star');
$use.attr({
'transform': 'translate(' + $.range([-400, 400]) + ',' + $.range([-300, 300]) + ")"
});
$star_g.append($use);
}
}
</script>
</body></html>