如何获取 g 元素的字符串格式的 svg

How to get the svg in string format of a g element?

本文关键字：元素 字符串 格式 svg 何获取 获取      更新时间：2023-09-26

我想知道是否可以使用 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 元素(在本例中为图层(并获取其内容。

我不确定这是否是您获取 g 元素内容的意思。我尝试使用简单的脚本操作它。

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

试试我创建的这个JSfiddle。

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

首先，你不能在 SVG 元素上使用 html()(请参阅这里的答案：为什么 .html(( 不能与使用 jquery 的 SVG 选择器一起使用？(，所以这取决于你想对 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 修改内容，请参阅链接答案(。

小提琴：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可以直接修改元素 - 这取决于你想做什么。

相关文章：