如何检查 SVG 元素上的悬停并在另一个 Svg 元素上播放过渡？

Question

我的 html 文件中有一个 svg 元素，我可以很容易地为其制作悬停动画。但我有一个 SVG 元素，里面有各个部分。我想检查父 svg 上的 :hover 事件，以便悬停上的任何元素都会导致悬停事件触发，然后仅对其中的一个矩形（而不是整个 svg）进行动画处理。 我读过一些关于此的 StackOverflow 帖子，但他们使用 Javascript。这在CSS中可能吗？

#SFXBoardContainer:hover {
  transform: translateY(-5%)
} /* Checks for whole svg element and moves the whole of it. */

#SContainer:hover {
  transform: translateY(-20%)
} /* Checks hover for only the bright pink part and only moves that */

/* What im trying to accomplish is checking for hover on the whole svg, and moving the SContainer part. */

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="444" height="584" viewBox="0 0 444 584">
  <defs>
    <clipPath id="clip-SFXBoardContainer">
      <rect width="444" height="584"/>
    </clipPath>
  </defs>
  <g id="SFXBoardContainer" clip-path="url(#clip-SFXBoardContainer)">
    <g id="SFXBoard" transform="translate(3 4.5)">
      <g id="SContainer">
        <path id="SPart2" d="M0,438V39A39,39,0,0,1,39,0H399a39,39,0,0,1,39,39V438L219,545Z" transform="translate(0 30)" fill="#a72454"/>
        <g id="SPart1" fill="#ff3680">
          <path d="M 218.9997100830078 519.95751953125 L 22.4999828338623 423.9505920410156 L 22.4999828338623 398.9996643066406 L 22.4999828338623 38.99966049194336 C 22.4999828338623 29.90120697021484 29.90171051025391 22.49911689758301 38.99971008300781 22.49911689758301 L 398.9996948242188 22.49911689758301 C 408.0977172851563 22.49911689758301 415.4994506835938 29.90120697021484 415.4994506835938 38.99966049194336 L 415.4994506835938 331.2477416992188 L 415.4994506835938 423.9505920410156 L 218.9997100830078 519.95751953125 Z" stroke="none"/>
          <path d="M 218.9997100830078 494.9156188964844 L 392.9993896484375 409.90185546875 L 392.9993896484375 331.2477416992188 L 392.9993896484375 44.99907684326172 L 45.00004196166992 44.99907684326172 L 45.00004196166992 398.999755859375 L 45.00004196166992 409.90185546875 L 218.9997100830078 494.9156188964844 M 218.9997100830078 544.99951171875 L 4.341634121374227e-05 437.9994201660156 L 4.341634121374227e-05 398.999755859375 L 4.341634121374227e-05 38.9997444152832 C 4.341634121374227e-05 17.46007537841797 17.4609317779541 -0.0009241265361197293 38.99971008300781 -0.0009241265361197293 L 398.9996948242188 -0.0009241265361197293 C 420.5384826660156 -0.0009241265361197293 437.9993896484375 17.46007537841797 437.9993896484375 38.9997444152832 L 437.9993896484375 331.2477416992188 L 437.9993896484375 437.9994201660156 L 218.9997100830078 544.99951171875 Z" stroke="none" fill="#c62b64"/>
        </g>
      </g>
      <rect id="STextTag" width="291" height="56" rx="2" transform="translate(74 337)" fill="#292c32"/>
      <text id="SSubjectTag" transform="translate(220 378)" fill="#ff3680" font-size="41" font-family="Bahnschrift" font-weight="700"><tspan x="-124.091" y="0">~</tspan><tspan y="0" text-decoration="underline">SFX/MUSIC</tspan><tspan y="0">~</tspan></text>
      <text id="SubjectTag2" transform="translate(220 323)" fill="#292c32" font-size="43" font-family="Bahnschrift" font-weight="600"><tspan x="-27.137" y="0">My</tspan><tspan x="0" y="37"></tspan><tspan x="0" y="74"></tspan><tspan x="-49.519" y="111">Work</tspan></text>
      <path id="SLineDiv" d="M1522.034,1502.031h230.328" transform="translate(-1417.053 -1234.751)" fill="none" stroke="#292c32" stroke-linecap="round" stroke-width="15"/>
      <rect id="SIconCover" width="192" height="158" rx="33" transform="translate(124 72)" fill="#292c32"/>
      <path id="SIcon" d="M1718.36,2621.775h41.561l13.8,13.057,14.615-32.863,18.108,56.674,24.11-80.795,22.731,80.795,16.319-56.674,13.84,32.863,13.353-13.057h57.394" transform="translate(-1610 -2467.263)" fill="none" stroke="#ff3680" stroke-linecap="round" stroke-width="10"/>
    </g>
  </g>
</svg>

在上面的示例中，我尝试检查整个 SVG (#SFXBoardContainer) 的 :hover 事件，并尝试对 SFXContainer 内的 SContainer 元素执行转换。

Answer 1

下面是 中的悬停选择器示例，用于转换 SVG 中某处的 。

svg:hover #r1 {
  transform: scale(1.5);
  transition: transform 1s;
}

#c1:hover {
  stroke: green;
}

<svg xmlns="http://www.w3.org/2000/svg"width="200" viewBox="0 0 10 10">
  <rect x="0" y="0" width="10" height="10" fill="silver" />
  <rect id="r1" x="2" y="2" width="4" height="4" fill="navy" />
  <circle id="c1" cx="5" cy="5" r="4" stroke="red" fill="none" />
</svg>