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秒。

在搜索解决方案时，我发现，如果将元素用单个<g>标签包裹起来，则动画延迟，但是如果没有<g>或两个其中没有延迟。

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>

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

1 个答案: