Question

我的网页上有一堆svg多边形，每个多边形的id都与我所在州的县名相对应，例如：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<polygon fill="#DCDDDE" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
190.41,192.082 194.273,187.422 204.273,185.109 207.954,184.596 210.917,181.566 211.49,181.674 213.694,182.688 215.108,184.742 
217.418,185.174 217.885,185.863 221.539,191.93 220.957,191.818 220.85,192.395 221.32,193.08 221.214,193.656 220.42,194.705 
220.313,195.283 220.778,195.973 220.674,196.545 221.145,197.238 221.722,197.344 221.615,197.918 222.086,198.605 220.71,199.549 
219.918,200.592 219.341,200.48 219.454,209.477 206.198,209.986 191.213,210.172 190.994,201.764 " id="Adams"/>
...
</svg>

我还有一个json对象，其中包含有关县的数据。我想在jquery中按名称调用每个多边形。这应该是一件容易的事，但我遇到了麻烦。我一直在用：

$('polygon#'+ obj[i].county ).css('fill', 'blue');

但这不起作用。

我试过了：

$('#'+ obj[i].county ).css('fill', 'blue');

也没用。

有人知道我做错了吗？

更新

如果我说：

$('#Adams' ).css('fill', 'blue');

......它有效。但如果我说：

$('#'+ obj[i].county ).css('fill', 'blue');

......它没有。

Answer 1

我的问题并不表示该县。从数据中得出的县名是全部大写字母，而多边形ID只是首字母大写。

Answer 2

这可能不是<svg>问题，而是id=xxx匹配问题。两个班轮将其资本化： -

var c = 'COUNTY'; // ie: obj[i].county
var cap = c[0].toUpperCase() + c.slice(1).toLowerCase();

注意：有些人更喜欢.substring(1)而不是.slice(1)

在jquery中获取特定的svg多边形

2 个答案: