小bug求解释

mac2022-06-30 110

这是要打开的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>

转载于:https://www.cnblogs.com/toly-top/p/9781978.html