在svg中添加新行，错误看不到该行 [英] add a new line in svg, bug cannot see the line
本文介绍了在svg中添加新行，错误看不到该行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在svg中添加新行 当按下添加按钮时，应在svg中添加新行 我可以确定在元素中添加了该行，但是为什么它没有显示在屏幕上?
I want to add a new line into the svg when, the add button is pressed, a new line should be added into the svg I can sure the line is added in the elements, but why it is not displayed on the screen?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#map
{
border:1px solid #000;
}
line
{
stroke:rgb(0,0,0);
stroke-width:3;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#add").click(function(){
var newLine=$('<line id="line2" x1="0" y1="0" x2="300" y2="300" />');
$("#map").append(newLine);
});
})
</script>
</head>
<body>
<h2 id="status">
0, 0
</h2>
<svg id="map" width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line id="line" x1="50" y1="0" x2="200" y2="300"/>
</svg>
<button id="add">add</button>
</body>
</html>
推荐答案
要将元素添加到SVG对象，必须在SVG名称空间中创建这些元素.由于jQuery目前不允许您执行此操作(AFAIK)，因此无法使用jQuery创建元素.这将起作用:
In order to add elements to an SVG object those elements have to be created in the SVG namespace. As jQuery doesn't allow you to do this at present (AFAIK) you can't use jQuery to create the element. This will work:
$("#add").click(function(){
var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
newLine.setAttribute('id','line2');
newLine.setAttribute('x1','0');
newLine.setAttribute('y1','0');
newLine.setAttribute('x2','300');
newLine.setAttribute('y2','300');
$("#map").append(newLine);
});
这篇关于在svg中添加新行，错误看不到该行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
