Как изменить цвет элемента SVG?

352

Я хочу использовать эту технику http://css-tricks.com/svg-fallbacks/ и изменить цвет SVG, но до сих пор я не смог этого сделать. Я положил это в CSS, но мое изображение всегда черное, несмотря ни на что. Мой код:

.change-my-color {
  fill: green;
}
<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

Барбара
источник
Я не эксперт SVG, но вы пытались изменить заливку на цвет фона?
Мег
@Megan в цвете фона SVG указывается с помощью свойства «заливка» и границы с «обводкой» (как вы сделали бы в Illustrator). w3.org/TR/SVG/propidx.html
Барбара
4
CSS из вашего HTML-документа не будет применяться к элементам SVG в <img />
pawel
1
Это возможно сейчас. Простой и функциональный ответ здесь: stackoverflow.com/a/53336754/467240
mtyson

Ответы:

189

Вы не можете изменить цвет изображения таким образом. Если вы загрузите SVG как изображение, вы не сможете изменить способ его отображения с помощью CSS или Javascript в браузере.

Если вы хотите изменить SVG изображение, вы должны загрузить его , используя <object>, <iframe>или используя <svg>встроенный.

Если вы хотите использовать методы на странице, вам нужна библиотека Modernizr, где вы можете проверить поддержку SVG и условно отобразить или не использовать запасное изображение. Затем вы можете встроить SVG и применить нужные вам стили.

Видеть :

Вы можете встроить SVG, пометить ваше резервное изображение именем класса ( my-svg-alternate):

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

А в CSS используйте no-svgкласс из Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ), чтобы проверить поддержку SVG. Если поддержка SVG отсутствует, блок SVG будет игнорироваться, и изображение будет отображаться, в противном случае изображение будет удалено из дерева DOM ( display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

Затем вы можете изменить цвет вашего встроенного элемента:

#time-3-icon {
   fill: green;
}
helderdarocha
источник
5
Вы не можете objectстилизовать встроенные SVG из документа хостинга.
Хавьер Рей
1
@JavierRey вы можете добавить стиль в содержимое тега объекта через javascript. Но вы правы, что это не применимо, если вы просто добавите его в таблицу стилей хост-документа.
Роберт Лонгсон
2
Я использую решение от @ manish-menaria, и оно отлично работает.
Райан Эллис
1
Принятый ответ должен быть изменен на: stackoverflow.com/a/53336754/467240
mtyson
379

Ответ 2020

CSS Filter работает во всех текущих браузерах

Чтобы изменить любой цвет SVG

  1. Добавьте изображение SVG, используя <img>тег.
<img src="dotted-arrow.svg" class="filter-green"/>
  1. Чтобы отфильтровать по определенному цвету, используйте следующую Codepen (Нажмите здесь, чтобы открыть codepen), чтобы преобразовать шестнадцатеричный цветовой код в фильтр CSS:

Например, вывод для #00EE00is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. Добавьте CSS filterв этот класс.
    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }
Маниш Менария
источник
5
Это сопровождается обычным предупреждением о том, что он не поддерживается в старых версиях браузера: developer.mozilla.org/en-US/docs/Web/CSS/…
Кевин Ван
17
Как отмечалось в CodePen, если ваш SVG не черный (у меня был серый), добавление brightness(0) saturate(100%)в начало списка фильтров сначала сделает его 100% черным, что позволяет другим фильтрам изменить его на правильный цвет.
jdunning
2
Кроме того, в этом вопросе StackOverflow содержится много интересных сведений о решении, которое сообщило CodePen.
jdunning
3
Мой парень. Поддержка кажется приемлемой caniuse.com/#feat=css-filters .
Сэм Доидж
работает так хорошо, использовал этот независимый кодекс, чтобы вставить мой гекс в фильтр: codepen.io/sosuke/pen/Pjoqqp
WEBjuju
221

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

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

Вы можете заметить, что есть некоторые теги XML, такие как путь, круг, многоугольник и т . Д. Там вы можете добавить свой собственный цвет с помощью атрибута стиля . Посмотрите на приведенный ниже пример

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Добавьте атрибут style ко всем тегам, чтобы вы могли получить SVG нужного вам цвета

sushant047
источник
48
Почему бы просто не использовать fillтакой атрибут fill = "#AB7C94"? Не уверен, зачем styleнужен атрибут
bg17aw
4
Привет, Даниэль, да, это работает. Я не знал, что заливка может использоваться как атрибут. Извините, что так долго не замечал ваш комментарий @ bg17aw
sushant047
30

Добавлена ​​тестовая страница - раскрасить SVG через настройки фильтра:

НАПРИМЕР filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Загрузите и раскрасьте свой SVG - Jsfiddle

Взял идею от: https://blog.union.io/code/2017/08/10/img-svg-fill/

Йонатан Аялон
источник
1
Спасибо, ты просто спас меня от себя. .custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}сделал только работу, мне нужно отключить значок.
Роджер
21

Только SVG с информацией о пути . Вы не можете сделать это с изображением ... как путь, вы можете изменить штрих и заполнить информацию, и все готово. как иллюстратор

Итак: через CSS вы можете перезаписать fillзначение пути

path { fill: orange; }

но если вы хотите более гибкий способ, как вы хотите изменить его с текстом, когда происходит эффект зависания .. используйте

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

Бискрем Мухаммед
источник
12

Самый простой способ - создать шрифт из SVG, используя такой сервис, как https://icomoon.io/app/#/select или подобный. загрузите SVG, нажмите «создать шрифт», включите файлы шрифтов и CSS на свою сторону и просто используйте и стилизуйте его, как любой другой текст. Я всегда так использую, потому что это делает стиль намного проще.

РЕДАКТИРОВАТЬ: Как упоминалось в статье, прокомментированной @ CodeMouse92, шрифты значков портят программы чтения с экрана (и, возможно, вредны для SEO). Так что скорее придерживайтесь SVG.

Феликс Хагспил
источник
5
Это также портит программы чтения с экрана. См. «Смерть
значковым
7

SVG маска на элементе box с цветом фона приведет к:

.icon{
  --size     : 70px;
  display    : inline-block;
  width      : var(--size);
  height     : var(--size);
  transition : .12s;
  -webkit-mask-size: cover;
  mask-size  : cover;
}

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(hhttps://image.flaticon.com/icons/svg/89/89139.svg);
  animation: 1s frames infinite ease;
}

@keyframes frames {
  50% { background:red;  }
}
<i class="icon icon-bike" style="--size:150px"></i>


Примечание. Маски SVG не поддерживаются в браузерах Internet Explorer.

VSync
источник
1
Большое спасибо, @vsync, это просто лучшее, что мне нужно.
Виксон
6

Вы можете изменить окраску SVG с помощью CSS, если вы используете некоторые приемы. Я написал небольшой сценарий для этого.

  • просмотреть список элементов, которые имеют изображение SVG
  • загрузить файл SVG как XML
  • получить только часть SVG
  • изменить цвет пути
  • замените src измененным svg как встроенное изображение
$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

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

cydoc
источник
Кстати, если вы являетесь разработчиком RoR, вы можете добавить новый метод для прекомпилятора sass, который тоже может выполнять эту работу. Это намного лучше, потому что в скомпилированном css-файле у вас будет правильное цветное изображение в кодировке base64. JS больше не нужен! Может быть, я мог бы предоставить код, который я написал, поговорить с техническим директором.
Cydoc
2
+1 за предоставление решения, вместо того, чтобы сказать, что это невозможно сделать. Ответ на этот вопрос также актуален: stackoverflow.com/questions/11978995/...
claytronicon
6

Целевой путь в SVG:

<svg>
   <path>....
</svg>

Вы можете сделать inline, например:

<path fill="#ccc">

Или

svg{
   path{
        fill: #ccc
Майкл Филипс
источник
4

Чтобы просто изменить цвет svg:

Перейдите в файл svg и в разделе стилей укажите цвет заливки.

<style>.cls-1{fill:#FFFFFF;}</style>
Сетху Сатьян
источник
Уже предложили этот ответ
Роберт Лонгсон
2

Если вы хотите сделать это для встроенного SVG, который, например, фоновое изображение в вашем CSS:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

конечно, замените ... своим встроенным кодом изображения

Видение Улей
источник
2

Например, в вашем HTML:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

Используйте jQuery:

$("#struct1").css("fill","<desired colour>");
Grv97
источник
Это работает, только если вы включаете файл SVG в HTML. Я отредактировал ваш ответ, чтобы прояснить это.
Флим
0

На самом деле, есть более гибкое решение этой проблемы: написание веб-компонента, который будет исправлять SVG как текст во время выполнения. Также опубликовано в Gist со ссылкой на JSFiddle

👍 фильтр: инвертированный (42%) сепия (93%), насыщенный (1352%) оттенок с поворотом (87 градусов), контрастность (119%) (119%);

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>
Петр Трипольский
источник
-1

кратчайший Bootstrap-совместимый способ, без JavaScript:

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

и используйте это как:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>
Wolfrevo Cats
источник
-1

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

Кимели Аках
источник
Общепринятый ответ уже предполагает встраивание и затем установить цвет в качестве решения.
Роберт Лонгсон
-1

Просто добавьте fill: "requiredColor" в тег svg изображения: пример:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
Шивани
источник
Это в основном то же самое предложение, что и этот или этот
Роберт Лонгсон
в этих ответах упоминалось заполнение тега path, он работал для меня в теге svg, поэтому я опубликовал его
Shivani