使用javascript修改svg属性不起作用 [英] Modifying svg attributes with javascript has no effect
问题描述
我试图用javascript修改一个svg标签以使其可以调整大小，但是我的更改没有任何效果。我需要这样做的原因是，这个标记是由一个我无法修改的库来呈现的，因此它似乎是我唯一的选择是使用javascript修改svg。
我知道这个脚本产生的标签是正确的，因为我能够将标签复制到一个新的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 =resultsvgxmlns =http://www.w3.org/2000/svgversion =1.1style =width：100％; height：100％; background-color ：white;viewbox =0 0 100 100preserveaspectratio =xminymin meet>
< circle cx =50cy =50r =40stroke =blackstroke-width =2fill =red>< / circle>
< / svg>
< / div>
< div id =testsvgstyle =width：80％; height：40％;>
< svg xmlns =http://www.w3.org/2000/svgversion =1.1width =100pxheight =100px>
< / div>
< / body>
< / html>
SVG区分大小写
$ b
svg.setAttribute（'viewbox'，'0 0'+ w +''+ h）;
svg.setAttribute（'preserveaspectratio'，'xminymin meet'）
应写成
svg.setAttribute（'viewBox'，'0 0'+ w +''+ h）;
svg.setAttribute（'preserveAspectRatio'，'xMinYMin meet'）
width and height on < svg> 元素是属性而不是样式（与html不同），所以您应该使用 setAttribute（'width'，'100％'） / code>而不是 .css（'width'，'100％'）
I'm trying to modify an svg tag with javascript to make it resizable, but my changes have no effect. The reason that I need to do this is that this tag is rendered by a library that I can't modify, and thus it seems like my only choice is to modify the svg with javascript.
I know that the tag that this script produces is correct since I am able to copy the tag to a new html document and it will work (I have included it in the sample code), so it seems like I need some way to force the svg to recognize that it has been changed (or another way to modify the svg).
Here's a HTML page that shows my problem:
<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>
SVG is case sensitive so
svg.setAttribute('viewbox', '0 0 ' + w + ' ' + h);
svg.setAttribute('preserveaspectratio', 'xminymin meet')
should be written
svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
svg.setAttribute('preserveAspectRatio', 'xMinYMin meet')
width and height on the <svg> element are attributes and not styles (unlike html) so you should use setAttribute('width', '100%') rather than .css('width', '100%')
这篇关于使用javascript修改svg属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
