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

Question

我正在看这张 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')

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

Answer 1

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

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

试试这个:

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