Question

我有一个svg作为字符串，我正在做一些修改。我正在将svg作为文本输出到targetDiv。

<html lang="en">
  <head>
    <title>Output Modified</title>
  </head>
  <body>
    <div id="targetDiv"></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 modifications to rect (e.g. height="200") 
        }

        document.getElementById('targetDiv').textContent = viewText;
    </script>
   </body>
   </html>

目前输出与viewText相同。我的问题是如何输出修改后的svg MARKUP？

Answer 1

您可以使用temp元素修改内容

＆＃13;

 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 tmp = document.createElement('div');
 tmp.innerHTML = viewText;

 var rect = tmp.getElementsByTagName("rect");
 for (var i = 0; i < rect.length; i++) {
   rect[i].style.height = '200px'
 }

 document.getElementById('targetDiv').innerText = tmp.innerHTML;

＆＃13;

<div id="targetDiv"></div>

＆＃13;

Answer 2

<html lang="en">
<head>
    <title>Output Modified</title>
</head>

<body>
    <div id="targetDiv"></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>';
            document.getElementById('targetDiv').innerHTML= viewText;
            var rect = document.getElementsByTagName("rect"); 
            for (var i = 0; i < rect.length; i++) { 
                //do modifications to rect (e.g. height="200") 
            }

    </script>
</body>
</html>

在调用getElementsByTagName("rect")

之前设置innerHTML

Answer 3

如果你可以使用jquery（如标签所示），这将更加简单：

<html lang="en">    
    <head>
        <title>Output Modified</title>
        <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>';
            $('#targetDiv').html(viewText);

            var rect = $('rect');
            for (var i = 0; i < rect.length; i++) {
                //do modifications to rect (e.g. height="200") 
            }
        </script>
    </head>    
    <body>
        <div id="targetDiv"></div>
    </body>
</html>

根据评论编辑：

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 = $('rect');
var text="";
for (var i = 0; i < rect.length; i++) {
    //do modifications to rect (e.g. width="200")
    console.log(text);
    text += 'Set width="200" <br />';
    //do modifications to rect (e.g. height="400")
    text += 'Set height="400"';
}
$('#targetDiv').html(text);

查看this fiddle

Answer 4

您手动将viewText键入为字符串。如果您希望在进行更改后能够获取svg的html，可以试试这个：

<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="targetDiv"></div>

<script>
    var rect = document.getElementsByTagName("rect"); 
    for (var i = 0; i < rect.length; i++) { 
        //do modifications to rect (e.g. height="200") 
    }

var viewText = document.getElementById("svg1").outerHTML;
document.getElementById("targetDiv").textContent=viewText;
</script>

输出修改后的textContent

4 个答案: