Question

我的svg中有一堆路径已经有id和#class。如何将所有路径与一个类或ID组合在一起？例如，我有这两条路径：

  <path
     style="font-size:12px;fill:#d0d0d0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:18.65967751;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
     d="m 471.60261,246.44442 29.99111,-0.99619 8.36129,-11.40059 -0.16978,-0.49813 0.58508,-0.68252 h 1.28346 l 2.45362,1.10686 4.6997,5.90324 5.05827,15.71735 1.37784,5.53421 0.11332,0.44279 1.52883,11.1239 0.41524,4.8333 0.26423,10.23838 0.50959,34.0174 -24.17783,3.63415 -6.11526,0.16628 -15.1371,-10.57045 -25.87655,4.99926 -21.25234,27.68986 -9.45597,-12.37832 -7.04008,-9.31609 9.4371,-6.8256 10.94705,-12.63657 v -0.59033 l -1.00034,-1.73412 33.1997,-57.77781"
     id="Monmouth"
     inkscape:connector-curvature="0" />
  <path
     style="font-size:12px;fill:#d0d0d0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:18.65967751;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
     d="m 435.51515,347.70327 21.25233,-27.68984 25.87652,-4.99933 15.13713,10.57047 6.11526,-0.16629 24.17782,-3.63412 -0.0943,4.40894 1.03809,19.44377 0.32087,5.40515 1.43446,16.45523 3.75592,26.43541 0.94372,8.89177 -0.15103,0.9408 -3.8692,18.09708 -10.32419,35.49318 -4.47322,11.08704 -5.549,5.64493 -22.59243,-9.99858 2.54803,-4.29832 0.60399,-5.81096 -9.7957,-41.48865 -42.78783,-60.04694 -3.56723,-4.74101"
     id="Ocean"
     inkscape:connector-curvature="0" />

现在我如何能够使用选择器将两者结合在一起，以便我可以同时将javascript应用于两者？

Answer 1

在此示例中，我们将pathclass作为类名添加到两个路径中。

var list = document.getElementsByTagName("path");

for (var i=0; i<list.length;i++){
    list[i].className += " " + "pathclass";
}

<path
     style="font-size:12px;fill:#d0d0d0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:18.65967751;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
     d="m 471.60261,246.44442 29.99111,-0.99619 8.36129,-11.40059 -0.16978,-0.49813 0.58508,-0.68252 h 1.28346 l 2.45362,1.10686 4.6997,5.90324 5.05827,15.71735 1.37784,5.53421 0.11332,0.44279 1.52883,11.1239 0.41524,4.8333 0.26423,10.23838 0.50959,34.0174 -24.17783,3.63415 -6.11526,0.16628 -15.1371,-10.57045 -25.87655,4.99926 -21.25234,27.68986 -9.45597,-12.37832 -7.04008,-9.31609 9.4371,-6.8256 10.94705,-12.63657 v -0.59033 l -1.00034,-1.73412 33.1997,-57.77781"
     id="Monmouth"
     inkscape:connector-curvature="0" />
<path
     style="font-size:12px;fill:#d0d0d0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:18.65967751;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
     d="m 435.51515,347.70327 21.25233,-27.68984 25.87652,-4.99933 15.13713,10.57047 6.11526,-0.16629 24.17782,-3.63412 -0.0943,4.40894 1.03809,19.44377 0.32087,5.40515 1.43446,16.45523 3.75592,26.43541 0.94372,8.89177 -0.15103,0.9408 -3.8692,18.09708 -10.32419,35.49318 -4.47322,11.08704 -5.549,5.64493 -22.59243,-9.99858 2.54803,-4.29832 0.60399,-5.81096 -9.7957,-41.48865 -42.78783,-60.04694 -3.56723,-4.74101"
     id="Ocean"
     inkscape:connector-curvature="0" />

首先检索NodeList对象（类似于数组）：

var list = document.getElementsByTagName("path");

并像使用数组一样进行访问：list[0] list[1]等。您不能使用forEach，因为它不是数组，但仍可以从0循环到list.length

使用以下命令将路径添加到路径：

list[i].className += " " + name

ID是唯一的，因此多个元素不能具有相同的ID。然后使用一个班级。

Answer 2

将同一个类添加到要选择的所有路径，并使用jquery获取所有这些元素（$(".abc")）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<path style="font-size:12px;fill:#d0d0d0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:18.65967751;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none" d="m 471.60261,246.44442 29.99111,-0.99619 8.36129,-11.40059 -0.16978,-0.49813 0.58508,-0.68252 h 1.28346 l 2.45362,1.10686 4.6997,5.90324 5.05827,15.71735 1.37784,5.53421 0.11332,0.44279 1.52883,11.1239 0.41524,4.8333 0.26423,10.23838 0.50959,34.0174 -24.17783,3.63415 -6.11526,0.16628 -15.1371,-10.57045 -25.87655,4.99926 -21.25234,27.68986 -9.45597,-12.37832 -7.04008,-9.31609 9.4371,-6.8256 10.94705,-12.63657 v -0.59033 l -1.00034,-1.73412 33.1997,-57.77781"
  id="Monmouth" class="abc" inkscape:connector-curvature="0" />
<path style="font-size:12px;fill:#d0d0d0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:18.65967751;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none" d="m 435.51515,347.70327 21.25233,-27.68984 25.87652,-4.99933 15.13713,10.57047 6.11526,-0.16629 24.17782,-3.63412 -0.0943,4.40894 1.03809,19.44377 0.32087,5.40515 1.43446,16.45523 3.75592,26.43541 0.94372,8.89177 -0.15103,0.9408 -3.8692,18.09708 -10.32419,35.49318 -4.47322,11.08704 -5.549,5.64493 -22.59243,-9.99858 2.54803,-4.29832 0.60399,-5.81096 -9.7957,-41.48865 -42.78783,-60.04694 -3.56723,-4.74101"
  id="Ocean" class="abc" inkscape:connector-curvature="0" />

<script>
  console.log($(".abc"))
</script>

如何分组一堆<path>＆

2 个答案: