如何使用jquery从svg图像访问内部元素？

Question

我想访问svg图像的内部元素。

以下是我的SVG图像文件

<div id="selectable_images" class="selected"> 
    <ul> 
     <li> 
      <div class="icons"> 
       <svg xmlns="http://www.w3.org/2000/svg" height="512" version="1.1" viewBox="0 0 412 412" width="412"> 
        <path id="53" d="M4 194 c0 0 -1 0 -1 -1 0 -1 -1 -1 -1 -1 -2 1 -2 -6 -2 -54 0 -33 0 -55 1 -55 0 0 2 0 3 1 2 1 3 2 3 4 0 3 1 4 5 4 4 0 4 0 3 -2 -1 -1 -2 -2 -1 -2 0 -1 2 -1 2 0 1 0 2 1 2 2 0 0 1 1 2 1 0 0 1 -1 1 -1 0 -1 0 -1 1 0 0 1 1 3 0 4 0 1 -1 2 -1 2 0 0 -1 1 -1 3 0 3 0 3 1 1 1 -1 2 -2 2 -3 0 -1 0 -1 0 -2 1 0 1 1 1 2 1 2 2 2 3 1 2 0 2 0 1 1 -1 1 -1 2 -1 2 0 0 2 0 4 0 2 0 4 1 4 2 1 1 1 3 1 4 0 1 0 2 1 2 0 -1 2 0 3 1 2 2 2 3 2 3 -1 0 -2 1 -3 2 -1 1 -1 1 0 1 1 0 1 0 0 1 -2 1 -2 1 0 3 1 1 2 3 2 5 -1 2 -1 4 -1 4 0 0 2 0 4 1 2... 1 0 0 0 0 1 -1 2zM23 76 c0 0 -1 0 -2 -1 -1 -1 -1 -1 0 -1 1 0 2 0 3 1 0 1 0 1 -1 1zM128 17 c-1 0 -1 0 0 -1 0 -1 0 -1 1 -1 0 0 0 0 0 1 0 1 0 1 -1 1zM131 10 c0 0 -2 -1 -3 -1 -1 -1 -2 -2 -1 -2 0 0 1 1 3 1 1 1 1 2 1 2zM192 9 c0 0 0 -1 1 -1 0 -1 0 -2 -1 -2 -1 0 -2 0 -2 1 1 1 0 1 0 0 -1 0 -2 -1 -2 -1 1 0 2 0 4 -1 3 0 3 0 2 2 -1 1 -1 2 -2 2zM133 8 c0 0 -2 -1 -4 -2 -2 -1 -3 -1 -5 0 -2 1 -4 1 -6 1 -3 -1 -3 -1 1 -1 3 0 4 0 3 -1 -1 0 0 -1 3 -1 3 0 5 1 7 2 1 1 2 2 1 2zM254 1 c-1 0 -2 0 -1 -1 0 0 2 0 2 0 1 1 0 1 -1 1z"> 
       </svg> 
      </div> 
     </li> 

     <li> 
      <div class="icons"> 
       <svg xmlns="http://www.w3.org/2000/svg" height="512" version="1.1" viewBox="0 0 412 412" width="412"> 
        <path id="54" alt="image1" d="M234 161 l-234 0 0 -80 0 -81 234 0 233 0 0 81 0 80 -233 0z m-232 -1 c1 0 1 0 1 0 0 -1 0 -1 -1 -1 -1 -1 -1 -1 -1 0 0 1 0 1 1 1z m86 0 l9 0 0 -4 c-1 -3 -1 -5 0 -5 0 -1 5 -2 10 -2 8 0 11 0 12 -1 1 -2 1 -2 1 0 1 1 1 2 0 2 0 1 0 3 0 5 l1 4 0 -3 c1 -2 2 -4 3 -5 1 -1 2 -1 3 -2 1 0 2 1 3 1 0 1 0 1 -1 1 -1 -1 -1 0 -1 1 0 1 0 1 -1 0 -1 -1 -2 -1 -2 0 0 0 0 1 0 1 0 1 0 2 -1 3 -1 1 0 2 1 3 2 1 7 1 19 1 17 0 17 0 18 -3 0 -1 1 -2 2 -2 0 0 1 0 2 0 1 -1 2 -2 2 -2 -1 0 0 -1 2 0 1 0 2 -1 3 -1 0 -1 -1 -1 -1 -1 -1 0 -2 0 -2 -...1 2 2 1 1 1 2 1 2zM12 154 c0 0 0 -1 0 -3 0 -2 0 -3 2 -2 2 0 2 0 0 2 -1 2 -2 3 -2 3zM4 147 c-1 0 -1 0 -1 -1 0 -1 0 -1 1 0 1 0 1 0 1 1 0 0 0 0 -1 0zM35 141 c-1 0 -2 -1 -2 -2 -1 -1 -1 -1 1 0 1 1 2 2 2 2 0 0 0 0 -1 0zM22 140 c0 0 0 -1 0 -1 -1 -1 0 -2 0 -1 1 0 2 0 2 -1 0 -1 1 -1 3 -1 2 1 2 1 -1 2 -2 1 -3 2 -4 2zM9 138 c0 0 -1 0 -2 -1 0 -1 0 -1 0 -2 1 0 1 0 1 1 0 0 1 1 2 0 1 0 1 0 1 1 -1 0 -2 1 -2 1zM17 136 c0 0 0 0 0 -1 0 -1 0 -1 1 -1 1 0 1 0 1 1 -1 1 -1 1 -2 1zM280 6 c-1 0 -1 0 0 -1 1 0 1 0 2 0 0 1 -1 1 -2 1z"> 
       </svg> 
      </div> 
     </li> 
    </ul> 
</div> 

我都试过，但没有成功。我需要提取的ID和SVG图片的d属性.could任何一个帮助我吗？

Answer 1

.attr()文档

$('element').attr('attributes name')得到属性的值。

此代码将做的工作

$('svg path').attr('id'); 
$('svg path').attr('d'); 

后OP的评论

DEMO

$("#selectable_images svg").click(function() { 
    var $this = $(this); 
    var path = $this.find('path'); 
    var id =path.attr('id'); 
    var d = path.attr('d'); 
    alert('id ='+id); 
    alert('d='+d); 
});