Я хочу использовать эту технику http://css-tricks.com/svg-fallbacks/ и изменить цвет SVG, но до сих пор я не смог этого сделать. Я положил это в CSS, но мое изображение всегда черное, несмотря ни на что. Мой код:
.change-my-color {
fill: green;
}<svg>
<image class="change-my-color" xlink:href="#" onclick="location.href='https://svgur.com/i/AFM.svg'; return false;" width="96" height="96" src="ppngfallback.png" />
</svg>Вы не можете изменить цвет изображения таким образом. Если вы загрузите SVG как изображение, вы не сможете изменить способ его отображения с помощью CSS или Javascript в браузере.
Если вы хотите изменить изображение SVG, вы должны загрузить его, используя <object>, <iframe> или <svg> inline.
Если вы хотите использовать методы на странице, вам нужна библиотека Modernizr, где вы можете проверить поддержку SVG и условно отобразить или не использовать запасное изображение. Затем вы можете встроить SVG и применить нужные вам стили.
Увидеть:
#time-3-icon {
fill: green;
}
.my-svg-alternate {
display: none;
}
.no-svg .my-svg-alternate {
display: block;
width: 100px;
height: 100px;
background-image: url(image.png);
}<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" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />Чтобы изменить цвет любого 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, такие как путь, круг, многоугольник и т.д.. Там вы можете добавить свой собственный цвет с помощью атрибута style. Посмотрите на приведенный ниже пример
<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 требуемого цвета
Ответ 2019
Фильтр CSS работает во всех современных браузерах
<img>.<img src="dotted-arrow.svg" class="filter-green"/>
Например, для #00EE00 выводом является
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
filter в этот класс. .filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
Добавлена тестовая страница - раскрасить SVG через настройки фильтра:
EG filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
Загрузите и раскрасьте SVG - Jsfiddle
Взял идею от: https://blog.union.io/code/2017/08/10/img-svg-fill/
Только 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>Самый простой способ - создать шрифт из SVG, используя такой сервис, как https://icomoon.io/app/#/select или подобный. загрузите SVG, нажмите "создать шрифт", включите файлы шрифтов и CSS на свою сторону и просто используйте и стилизуйте его, как любой другой текст. Я всегда так использую, потому что это делает стиль намного проще.
РЕДАКТИРОВАТЬ: Как упомянуто в статье, прокомментированной @CodeMouse92, иконочные шрифты портят программы чтения с экрана (и, возможно, вредны для SEO). Так что скорее придерживайтесь SVG.
Вы можете изменить раскраску SVG с помощью css, если вы используете некоторые трюки. Для этого я написал небольшой script.
$('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, который работает почти так же. Но в любом случае вам нужно изменить этот script, чтобы он соответствовал вашему делу. надеюсь, что это помогло.
Чтобы просто изменить цвет svg:
Перейдите в файл svg и в разделе стилей укажите цвет заливки.
<style>.cls-1{fill:#FFFFFF;}</style>
Целевой путь в SVG:
<svg>
<path>....
</svg>
Вы можете сделать inline, например:
<path fill="#ccc">
Или же
svg{
path{
fill: #ccc
Если вы хотите сделать это для встроенного 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");
.icon{
--size : 70px;
display: inline-block;
width: var(--size);
height: var(--size);
-webkit-mask-size: cover;
mask-size: cover;
transition: .12s;
}
.icon-bike{
background: black;
-webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg);
}
.icon-bike:hover{
background: green;
}<i class="icon icon-bike" style="--size:150px"></i>Например:
<svg viewBox="" width="" height="">
<path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
Используйте jQuery:
$("#struct1").css("fill","");
кратчайший 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>