一个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';
};
里的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';
};
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货