如何动态地向svg中添加元素？？

小灰狼 2014-08-26 09:49:41

<!DOCTYPE html>

<html>

<head>

	<style type="text/css">

	.line {

		fill:none;

		stroke:red;

		stroke-width:4

	}

	</style>

	<script type="text/javascript" src="jquery.js"></script>

	<script type="text/javascript">

	function f(){

		try{

			var html = "<path d='M30 30 L20 35 M20 35 L30 40 M30 40 L30 30 M30 35 L150 35' style='fill:none; stroke:black; stroke-width: 2' />";

			$(html).appendTo($("#svg1"));

		}catch(e){

			alert(e);

		}



	}

	</script>

</head>

<body>

<button onclick="f()">Test</button>



<svg id="svg1" class="cls1" xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" style="border: 1px solid blue; position: absolute; top: 60px; left: 30px; width: 300px;">

	<!--path d='M30 30 L20 35 M20 35 L30 40 M30 40 L30 30 M30 35 L150 35' style='fill:none; stroke:black; stroke-width: 2' /-->

</svg>



</body>

</html>

点击 Test 按钮，用jquery给 svg 添加一个路径，在浏览器的调度窗口也看到了元素添加成功，但是没有显示效果出来
而直接把 svg 中注释的代码放开，显示是正常的

...全文

3323 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_27556791 2016-08-26

打赏
举报

谢谢，帮到我了

kuohsing 2014-12-12

打赏
举报

引用 9 楼 hemowolf 的回复:

先感谢一理楼上各位的热心其实答案早在前天就已经找到了，之所以没结帖，是希望把分给正确答案的人，只是遗憾到现在也没有 baidu了很多次，要么找不到，要么都是同一篇文章，让人很讨厌最后用bing找到国外网站的一个帖子，有我要的东西： http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element 简单点说，就是用 var path = document.createElementNS("http://www.w3.org/2000/svg", "path") 然后用 jquery 把它加到 svg 里去就OK了。

最近在写个小程序，遇到了这个问题，的确需要加上namespace。

hhhh63 2014-08-29

打赏
举报

引用 1 楼 hemowolf 的回复:

另外，直接用 $("#svg1").html(html); 也是可以的，但这样做减少了很多灵活性

我试过，只能用这个方法，直接改属性不刷新，如果有好多事件等就做个封装调用吧。

小灰狼 2014-08-29

打赏
举报

引用 6 楼 u013472677 的回复:

[quote=引用 5 楼 hemowolf 的回复:] [quote=引用 4 楼 u013472677 的回复:]


function f(){
		try{
			var html = "<path d='M30 30 L20 35 M20 35 L30 40 M30 40 L30 30 M30 35 L150 35' style='fill:none; stroke:black; stroke-width: 2' />";
			//$(html).appendTo($("#svg1"));
			$("#svg1").html(html);
		}catch(e){
			alert(e);
		}

	}

这样可以做到，但是少了灵活性了比如我的 svg 里已经存在了很多元素，并且元素又绑定了很多事件，这岂不是要把它们的内容、事件全部重新生成一次？[/quote] 你也可以$("#svg1").append(html);

[/quote] 试过了，没起作用

小灰狼 2014-08-29

打赏
举报

先感谢一理楼上各位的热心其实答案早在前天就已经找到了，之所以没结帖，是希望把分给正确答案的人，只是遗憾到现在也没有 baidu了很多次，要么找不到，要么都是同一篇文章，让人很讨厌最后用bing找到国外网站的一个帖子，有我要的东西： http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element 简单点说，就是用 var path = document.createElementNS("http://www.w3.org/2000/svg", "path") 然后用 jquery 把它加到 svg 里去就OK了。

小灰狼 2014-08-28

打赏
举报

引用 4 楼 u013472677 的回复:


function f(){
		try{
			var html = "<path d='M30 30 L20 35 M20 35 L30 40 M30 40 L30 30 M30 35 L150 35' style='fill:none; stroke:black; stroke-width: 2' />";
			//$(html).appendTo($("#svg1"));
			$("#svg1").html(html);
		}catch(e){
			alert(e);
		}

	}

这样可以做到，但是少了灵活性了比如我的 svg 里已经存在了很多元素，并且元素又绑定了很多事件，这岂不是要把它们的内容、事件全部重新生成一次？

qcxl 2014-08-28

打赏
举报


function f(){
		try{
			var html = "<path d='M30 30 L20 35 M20 35 L30 40 M30 40 L30 30 M30 35 L150 35' style='fill:none; stroke:black; stroke-width: 2' />";
			//$(html).appendTo($("#svg1"));
			$("#svg1").html(html);
		}catch(e){
			alert(e);
		}

	}

小灰狼 2014-08-28

打赏
举报

移到HTML5组了，还没有人会？？？？？？

qcxl 2014-08-28

打赏
举报

引用 5 楼 hemowolf 的回复:

[quote=引用 4 楼 u013472677 的回复:]


function f(){
		try{
			var html = "<path d='M30 30 L20 35 M20 35 L30 40 M30 40 L30 30 M30 35 L150 35' style='fill:none; stroke:black; stroke-width: 2' />";
			//$(html).appendTo($("#svg1"));
			$("#svg1").html(html);
		}catch(e){
			alert(e);
		}

	}

小灰狼 2014-08-26