也许您可以帮我解释一下。我是svg的新手。我有这个svg，它是一张地图，分为几部分。我想将鼠标悬停在选定的部分上，以使其颜色更改为紫色，同时将该部分上的点的颜色更改为黄色。满足第一个条件，但我可以更改圆点的颜色。这是代码：
html,
body {
background-color: white;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.container {
/*border: 1px solid blue;*/
text-align: center;
}
.station {
stroke-width: 6;
stroke: red;
fill: red;
opacity: 0.7;
}
.stationlocationcontainer {
height: 100%;
width: 100%;
border: 1px solid green;
position: absolute;
top: 0%;
pointer-events: none;
}
.stationlocation:nth-child(1) {
position: absolute;
top: 24%;
left: 46%;
}
.stationlocation:nth-child(2) {
position: absolute;
top: 39%;
left: 39%;
}
.stationlocation:nth-child(3) {
position: absolute;
top: 50%;
left: 35%;
}
.stationlocation:nth-child(4) {
position: absolute;
top: 52%;
left: 41%;
}
.stationlocation:nth-child(5) {
position: absolute;
top: 63%;
left: 33%;
}
.stationlocation:nth-child(6) {
position: absolute;
top: 59%;
left: 42%;
}
.stationlocation:nth-child(7) {
position: absolute;
top: 73%;
left: 34%;
}
.stationlocation:nth-child(8) {
position: absolute;
top: 70%;
left: 40%;
}
.stationlocation:nth-child(9) {
position: absolute;
top: 73%;
left: 45%;
}
.stationlocation:nth-child(10) {
position: absolute;
top: 84%;
left: 28%;
}
.stationlocation:nth-child(11) {
position: absolute;
top: 73%;
left: 49%;
}
.stationlocation:nth-child(12) {
position: absolute;
top: 73%;
left: 51%;
}
.stationlocation:nth-child(13) {
position: absolute;
top: 73%;
left: 57%;
}
.stationlocation:nth-child(14) {
position: absolute;
top: 61%;
left: 60%;
}
.stationlocation:nth-child(15) {
position: absolute;
top: 58%;
left: 67%;
}
.stationlocation:nth-child(16) {
position: absolute;
top: 58%;
left: 67%;
}
.stationlocation:nth-child(17) {
position: absolute;
top: 50%;
left: 60%;
}
.stationlocation:nth-child(18) {
position: absolute;
top: 50%;
left: 67%;
}
.stationlocation:nth-child(19) {
position: absolute;
top: 44%;
left: 61%;
}
.stationlocation:nth-child(20) {
position: absolute;
top: 44%;
left: 68%;
}
.stationlocation:nth-child(21) {
position: absolute;
top: 34%;
left: 63%;
}
.stationlocation:nth-child(22) {
position: absolute;
top: 36%;
left: 68%;
}
.stationlocation:nth-child(23) {
position: absolute;
top: 24%;
left: 69%;
}
/*
#PV_svg #layer2 #path4461:hover,
#PV_svg #layer2 #path4463:hover,
#PV_svg #layer2 #path4465:hover,
#PV_svg #layer2 #path4474:hover,
#PV_svg #layer2 #path4476:hover,
#PV_svg #layer2 #path4478:hover,
#PV_svg #layer2 #path4480:hover,
#PV_svg #layer2 #path4482:hover,
#PV_svg #layer2 #path4484:hover,
#PV_svg #layer2 #path4486:hover,
#PV_svg #layer2 #path4488:hover,
#PV_svg #layer2 #path4490:hover,
#PV_svg #layer2 #path4492:hover,
#PV_svg #layer2 #path4494:hover,
#PV_svg #layer2 #path4496:hover,
#PV_svg #layer2 #path4498:hover,
#PV_svg #layer2 #path4500:hover,
#PV_svg #layer2 #path4502:hover,
#PV_svg #layer2 #path4504:hover,
#PV_svg #layer2 #path4506:hover,
#PV_svg #layer2 #path4508:hover,
#PV_svg #layer2 #path4510:hover,
#PV_svg #layer2 #path4512:hover,
#PV_svg #layer2 #path4514:hover,
#PV_svg #layer2 #path4516:hover{
fill:red;
}
*/
#PV_svg #layer2 #path4461:hover {
fill: purple;
}
.svg-wrap #PV_svg #layer2 #path4461:hover .stationlocationcontainer .stationlocation .station {
fill: yellow;
}
.stationlocation {
border: 1px solid yellow;
}
.stationpath {
stroke: red;
stroke-width: 4;
stroke-dasharray: 8;
width: 100%;
}
.stationlocationpathcontainer {
height: 100%;
width: 100%;
border: 1px solid green;
position: absolute;
top: 0%
}
.stationlocationpath:nth-child(1) {
position: absolute;
top: 14.5%;
left: 30%;
border: 3px solid red;
}
#PV_svg {
/*border: 1px solid red;*/
}
.svg-wrap {
position: relative;
}<div class="container">
<div class="svg-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="PV_svg" viewBox="0 0 4793 4950" version="1.1" onload="var src; if (document.documentURI) src = document.documentURI; else if (this.getSrc) src = this.getSrc(); else src = document.location.href + ''; try {parent.preload.load(src);}catch(e) {}"
width="50%" height="50%">
<g id="layer4" display="inline">
<path d="M143.515 4733.376l662.293-2452.454 531.914-558.737 318.63-500.329 616.195-442.396 476.63 71.1-108.496 252.335-341.8 84.728-107.27 225.14 41.436 127.724 81.633 21.066-34.233 273.864-487.162-71.099-23.7 508.229 650.427 279.131-226.464 861.093 200.131 56.616 134.3-176.432 334.43 84.266 13.166-685.978 180.382-38.183 21.067-408.163 324.908-470.9-24.206-100.549-297.925-29.793 44.688-534.403 572.68 88.904L3842 961.158l547.729-463.462 86.596 259.632-247.228 2349.979-549.045 64.516-200.132 667.544-2189.598 15.8-679.394 703.094z" id="path4473" opacity=".204" fill="#00f" fill-rule="evenodd" stroke="#000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/></g><g id="layer2" display="inline" opacity=".522" fill="green" fill-rule="evenodd" stroke-width="15" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1">
<path d="M183.876 4624.769h209.013l8.379-34.448h93.101l49.344-187.134 201.514-.292 31.6-129.032h100.065L937.46 4023.7l-318.631 1.316 57.933-230.414H402.897z" id="path4459" display="inline" opacity="1" stroke="#000" stroke-linecap="butt" stroke-linejoin="miter"/>
<path d="M2292.161 826.224h210.41l.452 24.206h124.304l-.413 26.068h87.928l-74.161 226.397-167.903.771-3.724 39.103-206.685 1.862-70.758 268.133 91.24 363.096-316.545 1.862v-37.24l-72.956-326.394 22.68-79.53-294.23.982 32.239-63.651h78.68l26.492-92.937 189.439.771 15.8-39.5-93.483 1.317 11.85-40.816h65.833l21.066-73.733h94.8l37.718-109.528 89.997 1.562 10.533-39.5 96.116-1.316z" id="path4461" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1621.8 1335.54l-35.349 95.844 26.068 139.652h-158.272l27.93 128.48 7.449 31.655 78.205 1.862 1.862 57.723-264.409-1.862-35.378 44.689 9.31 78.205-94.964 1.862-14.896 57.723-39.103 171.307 301.65 1.862-13.035 61.447 296.063 1.862 59.585-296.063 1.862-171.307h189.928l-72.956-326.393 22.68-79.53z" id="path4463" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1130.253 2142.68l-191.337 1.862-39.874 137.151-93.234-.77-47.19 180.164h89.152l-11.944 42.282-89.47-.546-76.025 313.913 599.652 1.277 148.885-612.024 13.035-61.447z" id="path4465" stroke="#000" stroke-linecap="butt" stroke-linejoin="miter"/>
<path d="M1418.868 2205.99l-158.273 654.505 266.27-.932 9.31-27.931h310.959l126.619-463.647h-91.24l7.449-33.517-201.872-.77-22.118 87.128-20.153-.814 53.983-213.298-280.934-.727" id="path4474" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M676.76 3794.6l102.7-389.73h331.797l149.338-544.375 9.388-42.482-599.652-1.277L402.897 3794.6z" id="path4476" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M937.459 4023.699l6.591-33.883h191.79l31.654-137.79 96.826 1.861 123.435-449.468-276.498.452H779.46l-102.7 389.73-57.932 230.414z" id="path4478" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1191.7 3110.937H2070.58l165.102-625.092-94.8-2.633 7.9-31.6h-197.498l-104.15 380.02h-310.958l-9.31 27.931-266.27.932z" id="path4480" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2044.51 3170.522l-69.214 306.915-242.516 1.543-94.192 320.908-3.724 37.241-344.156-.639 97.916-379.216h101.002l9.31-52.136-111.181-.72-276.498.453 63.685-238.074z" id="path4482" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1983.835 3434.93l194.742 1.862-5.586 33.517 93.873 1.09-36.695 139.879-101.867.545-11.172 48.413 100.87-.771-33.837 106.907 8.38 29.792-4.27 38.624-553.41 2.341 3.725-37.24 94.192-320.91 242.516-1.542z" id="path4484" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4236.122 684.71l202.962 1.861 11.172 46.55 15.827 29.793-81.62 751.24-587.229-2.634 52.666-458.196 89.533-2.633 18.433-165.899 100.066 2.634 2.633-79h102.7v-47.4l-13.167-39.499 86.899-5.267z" id="path4486" stroke="#0b1728" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3805.993 1219.112l-392.889 1.862 5.586-40.964h-201.099l-9.31 76.343 16.758-1.862-35.379 335.166h-14.896v37.24l297.925-1.862-44.688 409.647h297.925z" id="path4488" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3739.301 2072.416l581.962 2.633 63.2-560.895-587.229-2.634-18.433 186.965 93.482-1.316-3.95 43.45h-97.432z" id="path4490" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3725.926 2034.682L3691.9 2354.18l-586.137 2.5 9.443-136.8 85.356-2.632 36.547-180.156z" id="path4496" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3739.301 2072.416l-14.483 126.398h98.75l-7.9 60.567h-98.75l-10.533 93.482 583.278 1.317 31.6-279.131z" id="path4498" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3105.764 2356.68l-32.69 324.03 581.51-.506 37.318-326.024z" id="path4500" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3706.385 2352.863l-20.22 180.844h101.208l-5.586 39.102-96.826 1.862-13.034 126.619h316.545l1.862-18.62 266.958-.098 32.371-328.392z" id="path4502" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4257.292 2682.572l-38.728 411.568-292.298-1.317-5.266 22.384-306.781 2.633 32.916-223.832h102.7l2.633-42.133h-100.066l19.525-150.585h316.545l1.862-18.62z" id="path4504" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3654.583 2680.204l-5.932 42.499-303.03 1.457 8.558-44.108z" id="path4508" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3073.073 2680.71l-10.533 97.433-107.194 653.832 596.538-.452 22.158-126.266-102.248-.452 6.81-42.133h102.699l67.348-539.97-303.03 1.458 8.558-44.108z" id="path4510" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2955.346 3431.975l5.285-32.423h-290.477l-70.984 383.578-10.626.28-7.241 38.182 303.582-.658 14.39-55.3 90.85-.545-15.8 54.528h492.429l85.13-388.094z" id="path4512" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2323.897 3493.087l-60.567 323.897h163.266l-39.5-323.897z" id="path4514" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2427.912 3448.32l-7.9 23.7 2.634 102.7 32.916 243.58h106.65l2.633-32.916 67.149-337.064z" id="path4516" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
<div class="stationlocationcontainer">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" class="stationlocation">
<rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
</svg>
</div>
<!--
<div class="stationlocationpathcontainer">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" class="stationlocationpath" viewBox="0 0 300 300">
<path class="stationpath" d="M0,100 L300,100"></path>
</svg>
</div>
-->
</div>
</div>
答案 0 :(得分：0)
您用来更改桩号的CSS是：
stringr::str_split(value, sep) %>% unlist() %>% as.list()这是一个选择器，其中.svg-wrap #PV_svg #layer2 #path4461:hover .stationlocationcontainer .stationlocation .station {
fill: yellow;
}
是路径的孩子，在这里不是这种情况。
同样，没有CSS Selector使您能够逃脱.stationlocationcontainer包装程序，然后逃脱SVG来影响后续div的子级
我怀疑需要重组，或者您需要HTML，SVG和/或CSS。