Question

所以我有这个SVG，我想选择具有特定值的某个属性的所有路径。具体来说，属性键是“NEN2580”，值可以是很多东西。

所以我们假设我们有一组类似于：

的路径

<path style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); color: black; stroke-width: 0.25px; background-color: white;" d="M486.623,219.237 L486.375,217.624 L454.744,222.999 L454.972,224.497 L455.785,230.259 L456.344,235.117 L456.471,236.294 L457.993,236.122 L458.354,235.678 L459.039,236.234 L457.298,238.38 L462.863,242.894 L469.513,242.52 L469.228,237.441 L465.083,237.079 L465.16,236.2 L470.067,236.629 L470.395,242.471 L489.055,241.423 L488.64,236.886 L488.513,235.176 L488.369,233.611 L487.935,228.895 L487.716,226.954 L487.502,225.366 L486.623,219.237" guid="3e_Z0UB95FzQ84RHxlySDx" _id="3e_Z0UB95FzQ84RHxlySDx" type="IfcSpace" name="Cel" number="A1.01" ruimtefunctie="" toegankelijkheid="false" area="11.58914065878" NEN2580="Nuttige ruimte" ancestors="1EbDErTW54e9tQrrOBatzH,1EbDErTW54e9tQrrRq52Ux,1EbDErTW54e9tQrrRq52Uu,1EbDErTW54e9tQrrRq52Uw"></path>

我有这个代码，我肯定会工作，但它没有：

d3.selectAll("path[NEN2580='Nuttige ruimte']").style({fill: 'rgb(41, 128, 185)'});

同时将其更改为以下内容不起作用：

$("path[NEN2580='Nuttige ruimte']").css("fill", "rgb(41, 128, 185)");

是否无法选择以数字结尾的密钥？我只能提出，但我找不到css选择器文档中任何以数字结尾的属性键的约束。

提前致谢

Answer 1

您使用NEN2580的属性不是有效的SVG属性。要使其有效，您可以定义自定义XML命名空间并在<svg>标记中引用该命名空间。（示例中的其他属性也有同样的问题。）由于浏览器无效，浏览器无法对其进行解析，因此JavaScript无法根据它进行选择。

Answer 2

假设您在html（而不是XML）中执行此操作，该属性必须为lower case in the selector（html不区分大小写）

$("path[nen2580='Nuttige ruimte']").css("fill", "rgb(41, 128, 185)");

Answer 3

因为SVG的属性是从noSQL数据库动态生成的，该数据库是通过另一个服务填充的，所以该属性的名称是capitols，NEN2580。我改变了数据库以小写形式写了属性，比如nen2580，这就是诀窍。

虽然当它在capitols中时很奇怪，查询小写不起作用，但是当它作为属性小写时，查询capitols似乎并不重要。

所以：

什么行不通：

svg：

<path NEN2580="Nuttige ruimte">

JS：

$("path[NEN2580='Nuttige ruimte']").css("fill", "rgb(1,1,1)")
$("path[nen2580='Nuttige ruimte']").css("fill", "rgb(1,1,1)")

什么有效：

svg：

<path nen2580="Nuttige ruimte">

JS：

$("path[NEN2580='Nuttige ruimte']").css("fill", "rgb(1,1,1)")
$("path[nen2580='Nuttige ruimte']").css("fill", "rgb(1,1,1)")

d3js / jQuery选择器不起作用

3 个答案: