SVG 元素悬停导致其他 SVG 元素发生变化

Question

JSFiddle example。这个想法是，将鼠标悬停在大矩形上会缩放它，此外还会导致其他两个较小的矩形也缩放。反之亦然。

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g class="lower_element">
    <rect x="19" y="19" width="35" height="15" />
    <rect x="36" y="36" width="36.75" height="15"  />
  </g>  
    
  <g class="top">
    <rect x="149" y="100"  width="96.4" height="96.3"/>
  </g>
    
</svg>

CSS

svg {
    height: 220px;
    width: 400px;
    background: grey;
}

.lower_element  {
    fill: blue;
    transform-origin: center;
    transform-box: fill-box;
    transition-duration: 0.1s;
}

.lower_element:hover {
    transform: scale(1.7);
    -moz-transform: scale(1.7);
    -webkit-transform: scale(1.7);
    -o-transform: scale(1.7);
    -ms-transform: scale(1.7);
}

.top  {
   fill: blue;
   transform-origin: center;
   transform-box: fill-box;
   transition-duration: 0.1s;
}

.top:hover ~ .lower-element:hover ~ .lower-element  {
    transform: scale(1.7);
    -moz-transform: scale(1.7);
    -webkit-transform: scale(1.7);
    -o-transform: scale(1.7);
    -ms-transform: scale(1.7);
}

目前正在缩放两个较小的矩形。悬停在大矩形上没有任何效果。尝试将 ~ 用于 lower_element，这似乎适用于 div 元素，如 this example here，但它在 SVG 中不起作用。

PS. 解决方案保存在第一个提到的 JSFiddle 中。我在玩原始 SVG 时注意到，它有两千多行 g 代码，它没有像 JSFiddle 中所示那样工作。问题是，父“top”元素在兄弟元素下方被提及。我以为它会起作用，但它没有。我正在与 CSS 平行，而下面提到的任何内容都会替换上面提到的任何内容，因此应该可以工作。将父“top”元素放在兄弟元素之上解决了这个问题。

Answer 1

你的 class lower_element 的名字在 css 中是错误的。也试试这个：

html:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g class="top">
    <rect x="149" y="100"  width="96.4" height="96.3"/>
  </g>
  <g class="lower_element">
    <rect x="19" y="19" width="35" height="15" />
    <rect x="36" y="36" width="36.75" height="15"  />
  </g>  
</svg>

css:

svg {
  height: 220px;
  width: 400px;
  background: grey;
}

.lower_element {
  fill: white;
  transform-origin: center;
  transition-duration: 0.1s;
}

.top {
  fill: blue;
  transform-origin: center;
  transition-duration: 0.1s;
}

.top:hover + .lower_element {
  fill: red;
}

SVG 元素悬停导致其他 SVG 元素发生变化

SVG element hovering to cause other SVG elements change

css

svg

hover

rect