无法在IE

时间:2019-04-21 08:38:11

标签: javascript svg

我无法使用Internet Explorer中的JavaScript更改svg的SVG代码(innerHTML)。

如果我要检查IE上的元素并选择svg,则它只有:

<svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 0 0" preserveAspectRatio="xMidYMid meet" type="shape"><g /></svg>

我使用的代码是:

document.getElementsByTagName("svg")[0].innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 880 400" preserveAspectRatio="xMidYMid meet" type="shape" height="400" width="880">
<rect width="100%" height="100%" fill="rgb(255,255,255)"/><rect x="0" y="0" width="81" height="81" fill="rgb(179,146,5)"/><rect x="560" y="160" width="81" height="81" fill="rgb(67,123,235)"/><rect x="0" y="80" width="81" height="81" fill="rgb(0,0,0)"/><rect x="80" y="80" width="81" height="81" fill="rgb(0,0,0)"/>
</svg>';

例如,在Chrome中,它显示的svg如下: Example

但是在IE中,它只是空白。

1 个答案:

答案 0 :(得分:1)

您可以在@thebabydino创建的@enxaneta提供的链接中看到, 您可以使用group.textContent = 'string'来更改SVG组的内容。 这不会使浏览器呈现内容,因此要在HTML元素中添加SVG,我建议更改父元素的innerHTML

document.querySelector('.clear').addEventListener('click', function () {
  document.querySelector('g').textContent = '';
});

document.querySelector('.add').addEventListener('click', function () {
  document.querySelector('div').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 880 400" preserveAspectRatio="xMidYMid meet" type="shape" height="400" width="880"><g><rect x="100" y="100" width="100" height="100" fill="rgb(67,123,235)"/></g></svg>';
});
<button class="clear">Clear</button>
<button class="add">Add</button>
<div> 
  <svg xmlns="http://www.w3.org/2000/svg" role="img" style="stroke-width: 0px;" viewBox="0 0 880 400" preserveAspectRatio="xMidYMid meet" type="shape" height="400" width="880">
    <g>
      <rect x="100" y="100" width="100" height="100" fill="rgb(67,123,235)"/>
    </g>
  </svg>
</div>