2013-10-08 43 views
0

我想知道是否有可能使用jQuery或JavaScript获取svg元素的g元素中的内容?如何获取g元素的字符串格式的svg?

<svg> 
<g><path>...</path></g> 
</svg> 
<script> 
    var contents = $("div").append($("svg g").clone()).html(); 
</script> 

这将与路径或克元件内的任何部分,但不是克元件本身正常工作。此外,对于一些原因,如果我遇到这样的代码:

<script> 
    var contents = $("div").append($("path").parent().clone()).html(); 
</script> 

我能得到的内容,但对于项目,我需要能够与G元素(在这种情况下,层)匹配,并得到它的内容。

+0

想要对这个入门的理解进行修正,他们都没有错误地工作,但第一个将远远超过g标签,第二个将获得g标签。 –

回答

0

它似乎工作,但您的例子有几个问题。

首先,你不能在SVG元素上使用html()(见这里回答:Why .html() doesn't work with SVG selectors using jquery ?),所以这取决于你想用g元素做什么。

其次,您将g元素附加到div,但它需要位于svg元素内。因此,对于这样的页面:

<div> 
    <svg> 
     <g><path d='m10,10l10,0,0,-10,-10,0'></path></g> 
    </svg> 
</div> 

您可以克隆g元素是这样的:那么现在

g = $("svg g").clone(); 
$('svg').append(g); 

// Move the cloned square 
g.children().first().attr('d', 'm100,100l10,0,0,-10,-10,0'); 

你可以做任何你想要的变量在这个例子(见如果您需要直接开始编辑内部XML,而不是使用jQuery来修改内容,那么这个链接的答案)。

小提琴:http://jsfiddle.net/SpaceDog/sXbE3/

为了得到你需要使用XMLSerializer如上面的链接答案中描述的字符串:

var s = new XMLSerializer(); 
var str = s.serializeToString(g[0]); 
console.log(str); 

这里我使用g[0]得到G的DOM元素。如果你只想要内容尝试(g.children().first())[0]。我已经更新了小提琴。

但是,根据您要对字符串做什么,您可能不需要这样做。 jQuery可以直接修改元素 - 这取决于你想要做什么。

+0

我想获取svg g元素的内容(标记)。 –

+0

要做到这一点的方法是在我链接的其他答案中,我更新了小提琴并编辑了我的答案以显示示例。 – SpaceDog

0

我不确定这是不是你想要获取g元素的内容。我试着用一个简单的脚本来操纵它。

$("[name=getElement]").click(function(){ 
    $('.getThisElement').hide(); 
    $("#test"+$(this).val()).show('fast'); 

试试这个JSfiddle我创建了。