Squeak.ru - шаблоны программирования

Изменение CSS с помощью SVG ‹символов› при наведении

Я работаю над несколькими иконками SVG как <symbol>, которые я хочу изменить на :hover, :focus и :active. В частности, мне нужно иметь возможность изменять цвет определенных путей в SVG. Обычно с любым другим элементом я могу сделать что-то подобное

.parent .child {
    fill: blue;
}
.parent:hover .child {
    fill: red;
}

Однако при применении этого к моим символам SVG это просто не работает. Не так много дискуссий из того, что я могу найти за последние пару лет о проблемах изменения CSS с вещами Shadow-DOM, такими как символы SVG, но простое использование CurrentColor не сработает для меня, потому что мне нужно сделать это с двумя цветами.

У меня есть CodePen с моим сценарием здесь

Кажется, что это должно быть просто, но я некоторое время запутался в узлах. У кого-нибудь есть мысли, которые могут помочь?

Заранее спасибо!

svg css
21.09.2017

Ответы:


1

Аналогичный вопрос был задан здесь: элемент SVG USE и стиль :hover

Проблема в том, что элементы, на которые ссылается use, на самом деле не являются частью DOM, поэтому вы не можете получить к ним доступ с помощью CSS. Однако некоторые свойства, заданные для самого элемента use (например, fill или color), будут распространяться на элементы, на которые ссылаются.

Итак, во-первых, наш CSS может изменить только элемент use. Затем нам нужно использовать некоторые приемы в article @Matheus упомянул об обработке разных цветов. Это означает небольшое изменение кода SVG для symbol. Если иконкам нужно только два цвета для каждого состояния, мы можем использовать fill + color/currentColor:

<g id="icon_alarm">
    <g class="transflip">
        <path class="transflip" d="M8 1.3c-3.6 ....." />
        <path class="transflip" d="M1 5.1C1.7 3....." />
    </g>
    <g class="fillflip">
        <path class="fillflip" fill="currentColor" d="M11.7 8......" />
    </g>
    ...

.icon use {
    fill: transparent;
    color: #007fa3;
}
.icon:hover  use {
    fill: #007fa3;
    color: transparent;
}

Если значкам требуется больше цветов для каждого состояния, мы можем использовать переменные CSS и добавьте style="fill: var(--my-special-color)" стилей в SVG (тоже трюк из упомянутой статьи), но это не работает в некоторых браузерах, например. IE/пограничный.

Обновлено перо с использованием обоих методов: https://codepen.io/Sphinxxxx/pen/GMjgxJ?editors=1100

22.09.2017
  • Ты, мой друг, волшебник. Я не думаю, что раньше правильно понимал решение color/currentColor, поэтому я не думал, что оно сработает здесь. Ваше решение превосходно. Большое спасибо 22.09.2017

    • 2 
    html:hover .transflip {
  fill: red;
}

    Такой ховер работает. Я заметил, что вы использовали один и тот же класс для g и path. Я бы постарался не делать этого.

    Я также попробовал бы обернуть каждый svg внутри div с шириной и высотой, а затем использовать :focus и т. д. для этого div, поскольку элементы svg, похоже, не распознают псевдоселекторы на вашем ручке.

    21.09.2017
    Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...