Как раскрасить изображение SVG в фоновом изображении CSS

SVG Ресурсы изображений Icon CSS
Как раскрасить изображение SVG в фоновом изображении CSS

Мы все знаем, что если вы встраиваете SVG в html, вы можете использоватьfillчтобы заполнить изображение SVG цветом; если вы используете фоновое изображение в css для ссылки на изображение SVG, это не сработаетfillна цвет заполнить SVG. Есть и другие способы оба используют фоновое изображение для ссылки SVG и измените его цвет, и эта статья будет говорить об этом.

Преимущество использования SVG в фоновом изображении CSS

Используя SVG в фоновых изображениях CSS, вы можете использовать многие функции свойства фона CSS, такие как размер и положение изображения и т. д. Очень легко контролировать размер изображения в зависимости от размера устройства, и еще одно преимущество заключается в том, что вы можете поддерживать чистоту html, не вставляя изображение SVG в html.

Использование SVG в фоновых изображениях CSS имеет много преимуществ, а также значительно повышает производительность.

Итак, используя SVG в фоновом изображении CSS, есть ли способ изменить его цвет? Тогда смотри.

CSS mask

Используйте маску в CSS для изменения цвета фона.Этот метод прост и практичен.Важно то,что браузеры теперь поддерживают его все лучше и лучше.maskСвойство можно использовать для создания маски на основе контура элемента.При использовании маски может отображаться только область указанного содержимого изображения, а область за пределами области изображения скрыта. Вот как это использовать:

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

Давайте посмотрим, как использоватьmaskпример. Чтобы настроить цвет значка, мы используем background-color для определения цвета фона и используем изображение SVG для определения области маски, чтобы изображение могло отображать ранее определенный цвет фона. Поэтому мы можем указать любой цвет для заливки SVG. Однако атрибут mask официально не стал стандартом W3C и должен быть написан для разных браузеров, например, ядру webkit нужен префикс -webkit.

demo

maskЕсть много других свойств, таких какmask-position,mask-repeatа такжеmask-size, они используются так же, как соответствующие свойства фонового изображения в CSS, или их можно использовать какbackgroundТо же самое для использования сокращенного синтаксиса:

.icon {
    background-color: red;
    -webkit-mask:  url(icon.svg) no-repeat 50% 50%;
    mask: url(icon.svg) no-repeat 50% 50%;
}

пара браузераmaskподдержка становится лучше. Вы можете проверить поддержку каждого браузера по следующему адресу:

status.modern.ie/masks

потрите news.com/#feat=CSS-no…

CSS filters

Фильтр CSS. Это свойство может добавлять эффекты фильтра к элементам DOM, такие как фильтры в Photoshop. Свойство filter в CSS также может производить разные эффекты, складывая разные значения.

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewbox="0 0 24 24">
    <path fill="red" d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
</svg>

.icon-blue {
    -webkit-filter: hue-rotate(220deg) saturate(5);
    filter: hue-rotate(220deg) saturate(5);
}

В приведенном выше примере с использованием SVGfillСвойство заполняет цвет значка красным цветом. пройти черезhue-rotateСвойство Rotate Hue поворачивает оттенок на 220 градусов, изменяя цвет за счет изменения угла оттенка, поэтому вы можете изменить красный цвет на синий. Конечно, изменение цвета путем поворота оттенка не очень точно, и все же будет небольшая разница с фактическим цветом. Однако это можно сделать, добавив немного насыщенности цвету, т.е.saturationЭто фильтр, изменяющий насыщенность цвета. В приведенном выше примере я увеличил значение насыщенности до 500%, чтобы цвет был более чистым.

Под действием двух фильтров вы можете добавить к значку разные цвета. Например, в следующем примере я интегрируюhue-rotate, invert, brightnessа такжеsaturationЭти различные фильтры создают значки радужного цвета.

демонстрационный адрес

Конечно, если вы хотите создать серую иконку, это тоже очень просто, вы можете использоватьgrayscaleэтот серый фильтр и настроитьbrightnessзначение для достижения желаемого серого эффекта.

Этот вид настройки цвета с помощью фильтра не особенно удобен и интуитивно понятен. Для достижения желаемого эффекта требуются повторные корректировки. Однако, если в будущем фильтр CSS сможет регулировать цветовой эффект, регулируя значение HSL, это будет намного удобнее, чем сейчас.

Фильтр CSS в настоящее время поддерживается большинством браузеров, и IE будет поддерживать его в ближайшем будущем.

status.modern.ie/filters

руб neuther.com/#feat=CSS-fat…

Data URL

Крис Койер в своемProbably Don't Base-64 SVGВ этой статье рекомендуется использовать SVG напрямую с SVG XML. Конечно, если вы используете эту технику, для ее реализации вам придется использовать предварительно скомпилированный язык, такой как Sass.Здесь я использую Sass для заполнения цветом, и вы также можете настроить цвет по своему усмотрению.

Здесь нужно использовать массив в SASS, а именноSass mapЭта функция для управления цветами, карты Sass могут использоватьkey:valueдля определения вызова с некоторыми параметрами. Используя эту функцию, вы можете определить имя значка в качестве ключа, аcolor,stroke-colorи другие атрибуты определяют значение соответствующей иконки, что очень удобно и гибко.

Использование формы с кодировкой URL прекрасно работает в IE, но немного сложнее.

Probably Don't Base-64 SVG

Optimizing SVGs in data URIs

SVG Background Sprite

Спрайт в SVG аналогичен спрайту в CSS, который объединяет изображения в большое изображение. В CSS с помощьюbackground-sizeа такжеbackground-positionЭти два свойства относятся к изображению, которое вы хотите использовать. Для SVG существуют различные методы использования, например следующие:

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24"
height="576">
  <defs>
    <symbol id="heart">
      <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
    </symbol>
  </defs>
  <use xlink:href="#heart" x="0" y="0"   fill="red" />
  <use xlink:href="#heart" x="0" y="24"  fill="orange" />
  <use xlink:href="#heart" x="0" y="48"  fill="yellow" />
  <use xlink:href="#heart" x="0" y="72"  fill="green" />
  <use xlink:href="#heart" x="0" y="96"  fill="blue"  />
  <use xlink:href="#heart" x="0" y="120" fill="indigo" />
  <use xlink:href="#heart" x="0" y="144" fill="violet"  />
  <use xlink:href="#heart" x="0" y="168" fill="cyan" />
  <use xlink:href="#heart" x="0" y="192" fill="magenta"  />
  <use xlink:href="#heart" x="0" y="216" fill="lime" />
  <use xlink:href="#heart" x="0" y="240" fill="olive" />
  <use xlink:href="#heart" x="0" y="264" fill="maroon" />
  <use xlink:href="#heart" x="0" y="288" fill="purple" />
  <use xlink:href="#heart" x="0" y="312" fill="#fff" />
  <use xlink:href="#heart" x="0" y="336" fill="#e5e5e5" />
  <use xlink:href="#heart" x="0" y="360" fill="#ccc" />
  <use xlink:href="#heart" x="0" y="384" fill="#b2b2b2" />
  <use xlink:href="#heart" x="0" y="408" fill="#999" />
  <use xlink:href="#heart" x="0" y="432" fill="#7f7f7f" />
  <use xlink:href="#heart" x="0" y="456" fill="#666" />
  <use xlink:href="#heart" x="0" y="480" fill="#4c4c4c" />
  <use xlink:href="#heart" x="0" y="504" fill="#333" />
  <use xlink:href="#heart" x="0" y="528" fill="#191919" />
  <use xlink:href="#heart" x="0" y="552" fill="#000" />
</svg>

Выше приведен метод использования спрайта SVG, который определяет изображения, которые будут использоваться вsymbolВ элементе определите идентификатор, а ширина и высота определяются в соответствии с шириной и высотой каждого изображения на изображении. Например, я использовал 24 изображения выше, а ширина и высота каждого изображения равны 24, поэтому общая ширина и высота спрайта составляет 24X576, а затем используется, где вам нужно цитировать изображенияuseярлык для ссылки. Цвет каждого изображения может быть передан черезfillсвойства изменить.

демонстрационная ссылка

В дополнение к описанному выше методу использования для адаптации к спрайтам вы также можете использовать спрайты, используя фоновые изображения, такие как CSS, более удобно использовать Sass.

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

Вышеприведенное кратко описывает некоторые методы окрашивания изображений SVG в фоновые изображения CSS. Это может быть не очень исчерпывающим.Какие методы вы знаете?Добро пожаловать, чтобы оставить сообщение для совместного обсуждения.

Эта статья в основном изColoring SVGs in CSS Background ImagesВ этой статье разобрали, есть пропуски, пропуски или непонятные места, дайте пожалуйста еще совет!

Категории