所以我创建了一个页面,其中包含一些彩色的SVG图像,我希望它们在正常状态下变灰,并在悬停时显示颜色。
svg {
width: 200px;
margin: 50px;
}
svg * {
transition: fill 1s;
}
svg:not(:hover) * {
fill: gray !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<g>
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</g>
</svg>
可以看出,SVG具有不同的彩色元素,也有一些元素被分组。这是一个非常简化的例子,但真实的图像要复杂得多,有大量的transform
-s,所以我不能轻易删除分组。
两个图像都是完美的,并且在徘徊时改变颜色,但是第一个图像立即执行,而第二个图像在动画开始之前有1秒的延迟。
寻找解决方案我发现,如果一个elemend用单个<g>
标签包裹它有动画延迟,但如果没有<g>
或其中两个,则不会发生延迟。
Firefox动画两个图像没有动画延迟。
到目前为止,我手工取消了元素,但显然这不是一个好的解决方案,所以问题是如何在不改变文件的情况下解决它?
一个非常偷偷摸摸的bug,但很容易解决:只是将子选择器限制为非g
元素:
svg {
width: 200px;
margin: 50px;
}
svg :not(g) {
transition: fill 1s;
}
svg:not(:hover) * {
fill: gray !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<g>
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</g>
</svg>