Question

我想知道是否可以使用jquery或javascript获取svg元素的g元素中的内容？

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

这将正常使用g元素中的路径或任何部分，但不是g元素本身。另外由于某种原因，如果我运行此代码：

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

我可以获取内容，但是对于项目，我需要能够匹配g元素（在这种情况下是一个图层）并获得它的内容。

Answer 1

它似乎有效，但您的示例存在一些问题。

首先，您无法在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');

现在，您可以使用该示例中的变量 g 执行任何操作（如果您需要直接开始编辑内部XML而不是使用jQuery来修改内容，请参阅链接的答案）。

要获取字符串，您需要使用XMLSerializer，如上面链接的答案所述：

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

这里我使用g[0]来获取g的DOM元素。如果您只想要内容，请尝试(g.children().first())[0]。我已经更新了小提琴。

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

Answer 2

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

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

试试这个JSfiddle我已创建。