Как изменить цвет заливки SVG, использованного в качестве фона в формате base64?
У меня есть проект, в котором я использую SVG, загружаемый в CSS следующим образом:
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2238px%22%20viewBox%3D%220%200%2022%2038%22%20enable-background%3D%22new%200%200%2022%2038%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.style0%7Bfill%3A%09%23f47216%3B%7D%3C/style%3E%3Cpath%20d%3D%22M2.643%2038c-0.64%200-1.282-0.231-1.79-0.699c-1.074-0.988-1.143-2.661-0.154-3.735l13.13-14.258L0.664%204.4%20c-0.967-1.094-0.865-2.765%200.229-3.732s2.765-0.864%203.7%200.229L19.37%2017.592c0.898%201%200.9%202.545-0.035%203.542L4.588%2037.1%20C4.067%2037.7%203.4%2038%202.6%2038z%22%20class%3D%22style0%22/%3E%3C/svg%3E');
У меня есть несколько состояний при наведении, чтобы выделить элемент, изменяя цвет заливки стрелки.
На данный момент я просто применяю те же данные SVG, меняя часть с заливкой (fill%3A%09%23f47216%3B%7D%3C, где f47216 — это цвет) на нужный новый цвет. Это работает достаточно хорошо. Однако мне хотелось бы узнать, есть ли, возможно, более оптимальный способ достижения этого эффекта.
1 ответ(ов)
Вы можете использовать SVG в качестве маски в CSS, что является эффективной альтернативой, если вам нужны монохромные иконки. Вместо того чтобы использовать SVG как фоновое изображение и кодировать его в base64, попробуйте следующий подход. Вы можете изменить цвет фона, и также применять переходы при взаимодействии с мышью. Вот пример кода:
/* Или с префиксом -webkit */
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" xml:space="preserve"><path d="M11.432 9.512a.636.636 0 0 1 0 .918L2.12 19.742a.636.636 0 0 1-.458.201.637.637 0 0 1-.46-.201l-1-.998C.068 18.609 0 18.459 0 18.285s.068-.329.199-.461l7.854-7.852L.199 2.118A.638.638 0 0 1 0 1.66c0-.174.068-.327.199-.46l1-.998A.634.634 0 0 1 1.66 0c.172 0 .325.068.458.201l9.314 9.311z"/></svg>');
mask-size: auto 12px;
mask-repeat: no-repeat;
transition: background-color 200ms;
background-color: #ff0000;
Обратите внимание на несколько важных моментов:
- Свойство
mask-imageне содержит код в base64, оно просто начинается сdata:image/svg+xml;utf8,. - Свойства маски CSS по сути аналогичны свойствам фона в CSS. Вы можете изучить документацию и заметить, что с помощью масок можно добиться очень многого, и они могут заменить фоновые изображения в различных сценариях.
Для более подробного кода и демонстрации, смотрите этот fiddle: https://jsfiddle.net/o25beLqj/.
Изменение стилей SVG в img src с помощью CSS
Как изменить цвет заливки SVG-изображения при использовании его в качестве фонового изображения?
Как получить границы элемента div в jQuery
CSS-переход: плавное изменение фона с помощью opacity
Медиа-запросы: Как нацелиться на десктоп, планшет и мобильные устройства?