检索 svg g 的子元素答案

【问题标题】：retrieve child elements of svg g检索 svg g 的子元素
【发布时间】：2017-03-17 14:47:01
【问题描述】：

我正在尝试检索 svg g 元素的值。下面是我的代码

<div id="chart">
    <svg width="1386" height="186">
    <g transform="translate(0,0)">    
    <g><circle class="node highlight" r="17.603478526018918" style="fill: #008000;" cx="521.2058097619438" cy="67.43023189750437"></circle>
    </g>
    <g><text class="label highlight" dx="22.603478526018918" dy=".35em" transform="translate(521.2058097619438,67.43023189750437)">CNN</text>
    </g>
    </g>
    </svg>
</div>

在上述情况下，我想访问第三个“g”元素值，即“CNN”。我如何使用 jQuery 来做到这一点。

【问题讨论】：

标签： jquery svg

【解决方案1】：

s = '<div id="chart"><svg width="1386" height="186"><g transform="translate(0,0)"><g><circle class="node highlight" r="17.603478526018918" style="fill: #008000;" cx="521.2058097619438" cy="67.43023189750437"></circle></g><g><text class="label highlight" dx="22.603478526018918" dy=".35em" transform="translate(521.2058097619438,67.43023189750437)">CNN</text></g></g></svg></div>'

$('g:nth-of-type(2)',$(s))

【讨论】：

【解决方案2】：

试试这个：

console.log($('#chart').find('g').eq(2).text());

或者这样：

console.log($('#chart').find('text').eq(0).text());

甚至更好：

$('#chart g').find('text').text();

【讨论】：