使用JavaScript选择SVG和路径元素

Question

我希望能够选择SVG中的最后一个路径并将其删除。我尝试了多种方法，使用纯JavaScript和jQuery，但好像无法正确访问SVG或其路径。

HTML：

<div id="thesvgwrapper">    
  <svg id="thesvg"...><path ....></path><path ...></svg>
</div>

我可以使用以下方法清除SVG：

$('svg#thesvg').empty();

我可以使用以下方法查看SVG的内容：

var svgwrapper = $('#svgwrapper');
var svgcontents = $(svgwrapper).html();
alert(svgcontents);

然而，我无法像选择其他元素一样选中SVG并查看其路径内容... 我的目标类似于：

$('#thesvg path:last').remove();

thanks a million for any help

- tuddy

---

你能在 http://jsfiddle.net/ 上提供一个例子吗？ - Jared Farrish

请看我的评论。使用jQuery选择最后一个路径实际上非常容易，纯JavaScript也可能有效。我的代码中还有其他问题。谢谢。 - tuddy

Answer 1

这里是纯JavaScript可执行代码：

var paths = svgDoc.getElementsByTagName("path");
var last_path = paths[paths.length - 1];
last_path.parentNode.removeChild(last_path);

- Cameron Laird

---

结果发现选择最后一个路径并不是阻碍我的问题...修复了其他的东西，然后它就可以工作了。这个解决方案看起来还不错。我现在正在使用一些jQuery，这已经足够好了：var svg = document.createElementNS(ns, 'svg'); $('svg path:last-child').remove(); - tuddy

Answer 2

我假设你正在使用SVG兼容的浏览器，比如Firefox。

我已经有一段时间没有尝试通过jQuery来操作SVG了。我记得我不愿使用SVG jQuery插件，但是如果不使用插件，我就无法访问文档对象模型中的元素。包括jQuery SVG插件可以让我访问元素，因此将其包含在内可能有助于解决你遇到的问题。

- Dave F