#javascript #svg
#javascript #svg
Вопрос:
Я не могу изменить код SVG (innerHTML) svg с помощью JavaScript в Internet Explorer.
Если я перейду к проверке элемента в 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 следующим образом:
Но в IE он просто пустой.
Комментарии:
Ответ №1:
Как вы можете видеть по ссылке, предоставленной @enxaneta, созданной @thebabydino, вы можете использовать group.textContent = 'string'
для изменения содержимого группы SVG. Это не заставит браузер отображать содержимое, поэтому для добавления SVG в HTML-элемент я рекомендую изменить 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>