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

Question

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

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

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

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

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

score 0 · Accepted Answer

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

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

试试我创建的这个JSfiddle 。

score 0 · Accepted Answer

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

首先，您不能html()在 SVG 元素上使用（请参阅此处的答案：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 可以直接修改元素——这取决于你想要做什么。

2 回答 2