Javascript 静态与动态SVG
我观察到静态SVG和动态SVG的渲染非常不同。考虑下面的片段：Javascript 静态与动态SVG,javascript,html,svg,Javascript,Html,Svg,我观察到静态SVG和动态SVG的渲染非常不同。考虑下面的片段： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamic SVG</title>
<script>
window.onload = (event) => {
let svgNS = 'http://www.w3.org/2000/svg';
let xlinkNS = 'http://www.w3.org/1999/xlink';
let div = document.createElement('div');
let svg = document.createElementNS(svgNS, 'svg');
svg.classList.add('dynamic');
// try commented out also
svg.setAttributeNS(svgNS, 'viewBox', '-8 -8 40 40');
let useTag = document.createElementNS(svgNS, 'use');
useTag.setAttributeNS(xlinkNS, 'xlink:href', '#menu');
svg.appendChild(useTag);
div.appendChild(svg);
document.body.appendChild(div);
};
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<symbol id="menu">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-4.5 14c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm4.5 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm4.5 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z" />
</symbol>
</svg>
<div>
<!-- <svg class="static"> -->
<svg class="static" viewBox="-8 -8 40 40">
<use xlink:href="#menu"></use>
</svg>
</div>
</body>
</html>
动态SVG
window.onload=（事件）=>{
让svgNS为您服务http://www.w3.org/2000/svg';
让xlinkNS为您服务http://www.w3.org/1999/xlink';
设div=document.createElement（'div'）；
让svg=document.createElements（svgNS，'svg'）；
svg.classList.add（'dynamic'）；
//也试试看
setAttributeNS（svgNS，'viewBox'，'-8-840'）；
让useTag=document.createElements（svgNS，“use”）；
setAttributeNS（xlinkNS，'xlink:href'，'#menu'）；
appendChild（useTag）；
div.appendChild（svg）；
文件.正文.附件（div）；
};
仅供参考：这段代码是我正在处理的项目的一个非常简化的版本。我使用viewBox来调整按钮标记上图示符的大小和位置。SVG路径是使用viewBox=“0 24”创建的。viewbox=“-8-8 40 40”用于缩小图示符并将其居中放置在48px的方形按钮上。
viewboxsvg.setAttributeNS（'http://www.w3.org/2000/svg'视图框'，'0 100'；
console.log（'no namespace'，svg.getAttribute（'viewBox'））；//"50 50 50 50"
console.log（'svgNS'，svg.getAttributeNS（'http://www.w3.org/2000/svg“，”视图框“）；//“0 100 100”