Изменение цвета svg

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

<svg>
<image class="change-my-color" xlink:href="https://dl.dropboxusercontent.com/u/13823768/tumblr/iconmonstr-time-3-icon.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

и css

.change-my-color {
    fill: green;
}

на jsfiddle: http://jsfiddle.net/Kk93M/

8 72
css svg

8 ответов:

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

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

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

см.http://jsfiddle.net/helderdarocha/6uRgS/

вы можете встроить свой 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 будет проигнорирован, и изображение будет отображено, в противном случае изображение будет удалено из дерева дом (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;
}
53

чтобы изменить цвет любого 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"/>

добавьте атрибут стиля ко всем тегам, чтобы вы могли получить свой SVG вашего необходимого цвета

92

добавлена тестовая страница-цвет 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/

14

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

EDIT: как говорится в статьи прокомментировал @ CodeMouse92 значок шрифты испортить читателей экрана (и, возможно, плохо для SEO). Так что скорее придерживайтесь SVGs.

6

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

  • пройдите через список элементов, которые имеют изображение svg
  • загрузите файл svg в формате xml
  • fetch только 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')));
  });

});

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

3

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

Итак: через CSS вы можете перезаписать path 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>
2

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

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

<style>.cls-1{fill:#FFFFFF;}</style>
0

Если вы хотите сделать это для встроенного 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");

конечно, заменить ... с помощью встроенного кода изображения

-1