javascript - 无法使用 jquery 选择器访问 svg/xml 路径元素中的数据?

标签 javascript jquery svg

我正在看这张 map :

http://kartograph.org/showcase/usa-projection/usa.svg

这个选择器

$('svg g path')

在控制台中给我这个

<path xmlns="http://www.w3.org/2000/svg" d="M625,251L623,248L621,246L594,250L578,251L568,252L551,252L551,253L552,254L555,260L556,260L558,263L558,265L559,265L561,267L567,269L567,271L566,271L564,276L567,279L569,283L570,284L573,284L573,285L575,325L576,334L576,345L590,344L601,344L645,340L659,338L660,340L661,340L661,342L656,350L669,348L669,346L671,345L668,343L671,341L670,341L671,340L671,338L671,336L670,336L672,335L672,336L672,336L673,336L673,336L673,333L676,334L677,332L676,330L677,325L677,324L676,325L672,324L672,322L669,318L670,317L668,309L665,308L665,307L661,305L660,306L659,304L654,301L651,299L651,296L652,291L653,289L653,287L654,284L647,282L646,284L644,283L643,280L643,279L642,276L640,274L636,271L633,269L630,266L629,264L628,263L628,262L627,259L626,252L627,251L625,251Z " data-key="MO" data-label="Missouri"/>

我只想访问 data-key 属性。我试过了

$('svg g path').data("key")

$('svg g path').attr("data-key")

$('svg g path[data-key]') (this one returns the whole path node)

$('svg g path').find('data-key')

我没有主意,这应该很容易。请帮忙。

最佳答案

正如前面提到的,本例中的 $ 变量不是 jQuery。

话虽如此,它确实起到了选择器的作用,这就是为什么当您调用 $('svg g path') 时会取回元素。您可以使用选择器以及常规 DOM 方法(vanilla JavaScript)来获取您想要的信息。

试试这个:

$('svg g path').attributes['data-key'].value

关于javascript - 无法使用 jquery 选择器访问 svg/xml 路径元素中的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23444541/

相关文章:

c# - 在 ASP.NET MVC 中执行 ListView 的最佳方法?

javascript - 从 JSON 数据输出元素的递归函数

javascript - 递归更改 JSON 键名(全部大写)?

html - 解决 CSS 兼容性

css - SVG 动画 : Stroke/Border not complete

google-chrome - 无法在 Chrome 中使用 D3.js 选择 <linearGradient>

javascript - 自动关闭日期范围输入 Shiny

javascript - 获取字符串形式的对象名称

javascript - 对于通过 html 元素和追加仅追加到最后一个元素

jquery - 使用 CSS3 转换来翻转(旋转和缩放) block