使用 document.write() 输出标记

Question

我的页面上有一个内联 svg 作为变量。我正在对其进行一些修改。如何在页面（不是 svg 图像）上回显 viewText 并进行修改。如何让viewText 显示在页面上？

例子：

<script>
var viewText = "<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg>"

  var rect = document.getElementsByTagName("rect"); 
  for (var i = 0; i < rect.length; i++) { 
   //do something 
  }

document.write( viewText );//how do I output the modified 'viewText' code on the page?
/*e.g.: 
<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg> */
 </script>

Answer 1

类似的东西

<div id="target"></div>
<script>
    var viewText = '<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg>';

    var rect = document.getElementsByTagName("rect"); 
    for (var i = 0; i < rect.length; i++) { 
        //do something 
    }

    document.getElementById('target').textContent = viewText;
</script>

Answer 2

只需在 SVG 元素中添加一个 id 并使用 outerHTML：

<svg width="400" height="100" id="svg1">
   <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

<div id="target"></div>

var yourCode = document.getElementById("svg1").outerHTML;
document.getElementById("target").textContent=yourCode;

你会得到你的 SVG 作为一个字符串，你可以把它放在一个 id="target" 的 div 中：

'<svg width="400" height="100" id="svg1">
   <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect>
</svg>'