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>

我已经尝试但没有成功。我需要提取svg图像的id和d属性。可以帮助我吗？

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);
});

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

1 个答案: