SVG元素CSS内部过渡< g>在Chrome上标记

Question

所以我已经创建了一个带有一些彩色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>或两个的两个，则不会发生延迟。<<<<<<<<<<<<<<<<<<<</p>

firefox动画两个图像没有动画延迟。

到我没有组成的元素时，显然这不是一个好的解决方案，所以问题是如何在不更改文件的情况下如何解决？

Answer 1

一个非常偷偷摸摸的错误，但很容易解决：只需将子选择器限制为非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>