提问:js怎么动态生成svg

3,067 阅读1分钟

当界面中存在svg时,用js往里添加图形这个功能能够实现。但是,往界面加入svg标签连带图形时就出现了问题。求大佬指教指教......我的代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
var body = document.querySelector('body');
var svg = document.createElement('svg');
svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
svg.setAttribute('version','1.1');
svg.style.width = '200px';
svg.style.height = '200px';
svg.innerHTML = '<rect width="100" height="50" fill="red"></rect>'
body.appendChild(svg);
</script>
</body>
</html>

知道了

var body = document.querySelector('body');
    var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
    svg.setAttribute('version','1.1');
    svg.style.width = '200px';
    svg.style.height = '200px';
    svg.innerHTML = '<rect width="100" height="50" fill="red"></rect>'
    body.appendChild(svg);