javascript - 如何动态改变svg线的宽度

标签 javascript svg

我编写了以下代码,成功增加了 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);
                }
        };

http://jsfiddle.net/4xnpn3wj/

关于javascript - 如何动态改变svg线的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27035593/

相关文章:

javascript - Node.js 应用程序接收来自浏览器的发射,但浏览器不接收返回的发射

javascript - Javascript/NodeJS 中的 Protocol Buffer 字段选项

javascript - 如何使我的 n-resize 显示正确?

javascript - 使用 jquery 为 SVG 的填充设置动画?

javascript - Angular Javascript 连接

javascript - 在可扩展 Accordion 内显示 <div></div> - 不显示 <div> 内的内容

javascript - 如何将 svg 图标与 Material-UI SvgIcon 合并

javascript - Angular SVG 操作在 IE10 中不起作用

javascript - svg 路径不可见

javascript - grunt-injector - 如何使用 Grunt 的 'dynamically built files objects.'?