我试图使用JavaScript修改一个SVG标签,使其可调整大小,但我的更改没有效果。我需要这样做的原因是这个标签是由一个我无法修改的库渲染的,因此似乎唯一的选择是使用JavaScript修改SVG。
我知道该脚本生成的标签是正确的,因为我可以将该标签复制到新的HTML文档中并且它能正常工作(我已将其包含在示例代码中),所以似乎我需要一种方法来强制SVG识别其已被更改(或另一种方式来修改SVG)。
这里有一个显示我的问题的HTML页面:
我知道该脚本生成的标签是正确的,因为我可以将该标签复制到新的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>
find('svg')
之后添加[0]
以获取jQuery元素中的DOM元素。这一点很重要,可以使setAttribute()
方法可用。不能使用jQuery的attr()
方法,因为SVG DOM与HTML DOM不同(参见http://keith-wood.name/svg.html#dom)。 - Offirmo