Как удалить или заменить атрибуты 'width' и 'height' на svg root, используя Javascript?

Question

Есть файлы SVG, которые содержат информацию заголовка о высоте и ширине в мм.

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!-- Creator: CorelDRAW X6 --> 
<svg xmlns="http://www.w3.org/2000/svg" width="50.8mm" height="55.0332mm" version="1.1" viewBox="0 0 5080 5503" /> 

Я показываю эти изображения с помощью объекта

<div id="panel"> 
     <object id="svg" class="group" data="none.svg" width="500" height="500"></object>   
</div> 

var svg = document.getElementById('svg'); 
svg.setAttribute('data', 'one.svg'); 

Однако в некоторых браузерах, это оказывается не так. Чтобы решить эту проблему, мне нужно заменить высоту и ширину, присвоить им значение 100%

Как изменить строку с помощью Javascript?

width="50.8mm" height="55.0332mm" 

в

width="100%" height="100%" 

спасибо

Answer 1

В вашей SVG шириной метки и высотой атрибуты, так что вы можете просто написать:

svg.setAttribute('width', '100%'); 
svg.setAttribute('height', '100%'); 

таким же образом вы установили/изменить атрибут data.

Отредактировано:

Попробуйте загрузить (или перезагрузка) атрибут данных SVG в более позднее время, например:

var svg = document.getElementById('svg'); 
svg.setAttribute('width', '100%'); 
svg.setAttribute('height', '100%'); 
setTimeout(function(){svg.setAttribute('data', 'one.svg');},0); 

Отредактировано # 2:

Если я правильно понял, у вас есть определенного размера в вашем файле svg. Затем вы должны отредактировать его. Если вам нужно сделать это во время выполнения с помощью JS, вы можете попробовать этот сценарий:

var container = document.getElementById('svg'); 
var innerDoc = container.contentDocument; 
var svg = innerDoc.getElementsByTagName('svg')[0]; 
svg.setAttribute('width', '100%'); 
svg.setAttribute('height', '100%');