我编写了以下代码,成功增加了 svg
的大小行但无法减小它的大小。代码如下:
var x = function(a,s){
var line = document.getElementById('l1');
if (s > line.getAttribute(a) ) { // if s i greater
for (var i = line.getAttribute(a); i<=s;i++ ){
line.setAttribute(a, i);
}
};
if(s < line.getAttribute(a)){
for (var i = line.getAttribute(a); i<s;i-- ){
line.setAttribute(a, i);
}
};
};
x('x2', 400); // changes the width of the svg
x('x2', 40); // fail
<html>
<body>
<svg heigth="210" width="500" id="svg1" >
<line id="l1" x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(250,30,0); stroke-width:2"/>
</svg>
</body>
</html>
正如您所看到的,它能够增加宽度但不能减小宽度?
我对 i<s
中的第二个 if 语句感到困惑和i--
我认为这一切都是错误的(也许不是)
如果您能解释一下您的答案,这样它不仅对我有用,对其他人也有用。
谢谢!
最佳答案
有效
if(s < line.getAttribute(a)){
for (var i = line.getAttribute(a); i > s;i-- ){ //changes here
line.setAttribute(a, i);
}
};
关于javascript - 如何动态改变svg线的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27035593/