Я пытаюсь изменить тег svg с помощью javascript, чтобы сделать его изменяемым по размеру, но мои изменения не влияют. Причина, по которой мне нужно сделать это, заключается в том, что этот тег визуализируется библиотекой, которую я не могу изменить, и, похоже, мой единственный выбор - изменить svg с помощью javascript.
Я знаю, что тег, созданный этим script, корректен, так как я могу скопировать тег в новый html-документ и он будет работать (я включил его в примерный код), поэтому мне кажется, что мне нужно каким-то образом заставить svg признать, что он был изменен (или другим способом изменить svg).
Вот HTML-страница, которая показывает мою проблему:
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var svg = $('#testsvg').find('svg')[0];
var w = svg.getAttribute('width').replace('px', '');
var h = svg.getAttribute('height').replace('px', '');
svg.removeAttribute('width');
svg.removeAttribute('height');
svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h);
svg.setAttribute('preserveaspectratio', 'xminymin meet')
$(svg)
.css('width', '100%')
.css('height', '100%')
.css('background-color', 'white');
});
</script>
</head>
<body style="background-color: #333;">
<div style="width: 80%; height: 40%;">
<svg id="resultsvg" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 100%; height: 100%; background-color: white; " viewbox="0 0 100 100" preserveaspectratio="xminymin meet">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
</svg>
</div>
<div id="testsvg" style="width: 80%; height: 40%;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</div>
</body>
</html>