开发者

Selecting SVG and path elements with JavaScript

I would like to select the last path in an SVG and remove it. I've tried a variety of methods, in pure javascript and in jquery and I don't seem to be able to access the SVG properly or its paths.

HTML:

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

I CAN clear the SVG using:

$('svg#t开发者_JAVA百科hesvg').empty();

I CAN see the SVG's contents using:

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

However, I CANNOT similarly select the SVG and see it's path contents...

my goal is something like

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

thanks a million for any help


Here's executable code in pure JavaScript:

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


I'm assuming that you're using an SVG compatible browser, such as Firefox.

It's been a while since I tried to manipulate SVG via jQuery. I remember that I was reluctant to use an SVG jQuery plugin, but without one I was having some problems accessing the elements in the DOM. Including the jQuery SVG plugin allowed me to access the elements so including it might help with the problems that you're having.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜