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

Question

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

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 元素一起使用，就像在此示例中一样，但它在 SVG 中不起作用。

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

Answer 1

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

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;
}