Элементы SVG CSS-переход внутри тега <g>в Chrome - PullRequest
Новая
       395

Элементы SVG CSS-переход внутри тега <g>в Chrome

0 голосов
/ 21 марта 2019

Итак, я создал страницу с несколькими красочными 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 анимирует оба изображения без задержки анимации.

На данный момент я разгруппировал элементы вручную, но, очевидно, это не очень хорошее решение, поэтому вопрос в том, как его можно решить, не меняя файлов вообще?

1 Ответ

2 голосов
/ 21 марта 2019

Довольно хитрая ошибка, но легко решаемая: просто ограничьте дочерний селектор не-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>
...