How can I check for hovers on SVG elements and play transitions on another Svg element?-CodePudding

I have an svg element in my html file, for which I am very easily making hover animations for. But I have an SVG elements with various parts inside it. I want to check the :hover event on the parent svg, so that any element on hovered would result in the hover event firing, and then only animate, say, a rectangle inside this and not the whole svg. I've read some StackOverflow posts on this, but they use Javascript. Would this be possible in 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>

In the above example, I'm trying to check the :hover event for the whole SVG (#SFXBoardContainer) and trying to perform transitions on the SContainer element inside SFXContainer.

CodePudding user response：

Here is a example of a hover selector in <svg> that transforms a <rect> somewhere in the 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>