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

Question

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

<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>

我可以获取内容，但是对于项目，我需要能够匹配ag元素（在本例中为图层）并获取其内容。

Answer 1

它似乎可行，但是您的示例存在两个问题。

首先，您不能在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修改内容，请参阅链接的答案）。

要获取字符串，您需要使用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

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

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

试试我创建的这个JSfiddle 。