如何解决SVG 元素悬停导致其他 SVG 元素改变
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 中。我在玩具有两千多行 g 代码的原始 SVG 时注意到,它没有像 JSfiddle 中所示那样工作。问题是,在兄弟元素下面提到了父“顶部”元素。我以为它会起作用,但它没有。我正在与 CSS 平行,而下面提到的任何内容都将替换上面提到的任何内容,因此应该可以工作。将父“顶部”元素放在同级元素上方解决了这个问题。
解决方法
你的 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。