Я хочу использовать эту технику 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 как изображение, вы не сможете изменить способ его отображения с помощью CSS или Javascript в браузере.
Если вы хотите изменить SVG изображение, вы должны загрузить его , используя
<object>
,<iframe>
или используя<svg>
встроенный.Если вы хотите использовать методы на странице, вам нужна библиотека Modernizr, где вы можете проверить поддержку SVG и условно отобразить или не использовать запасное изображение. Затем вы можете встроить SVG и применить нужные вам стили.
Видеть :
Показать фрагмент кода
Вы можете встроить SVG, пометить ваше резервное изображение именем класса (
my-svg-alternate
):А в CSS используйте
no-svg
класс из Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ), чтобы проверить поддержку SVG. Если поддержка SVG отсутствует, блок SVG будет игнорироваться, и изображение будет отображаться, в противном случае изображение будет удалено из дерева DOM (display: none
):Затем вы можете изменить цвет вашего встроенного элемента:
источник
object
стилизовать встроенные SVG из документа хостинга.Ответ 2020
CSS Filter работает во всех текущих браузерах
Чтобы изменить любой цвет SVG
<img>
тег.Например, вывод для
#00EE00
isfilter
в этот класс.источник
brightness(0) saturate(100%)
в начало списка фильтров сначала сделает его 100% черным, что позволяет другим фильтрам изменить его на правильный цвет.Чтобы изменить цвет любого SVG, вы можете напрямую изменить код SVG, открыв файл SVG в любом текстовом редакторе . Код может выглядеть следующим образом
Вы можете заметить, что есть некоторые теги XML, такие как путь, круг, многоугольник и т . Д. Там вы можете добавить свой собственный цвет с помощью атрибута стиля . Посмотрите на приведенный ниже пример
Добавьте атрибут style ко всем тегам, чтобы вы могли получить SVG нужного вам цвета
источник
fill
такой атрибутfill = "#AB7C94"
? Не уверен, зачемstyle
нужен атрибутДобавлена тестовая страница - раскрасить 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/
источник
.custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}
сделал только работу, мне нужно отключить значок.Только SVG с информацией о пути . Вы не можете сделать это с изображением ... как путь, вы можете изменить штрих и заполнить информацию, и все готово. как иллюстратор
Итак: через CSS вы можете перезаписать
fill
значение путино если вы хотите более гибкий способ, как вы хотите изменить его с текстом, когда происходит эффект зависания .. используйте
источник
Самый простой способ - создать шрифт из SVG, используя такой сервис, как https://icomoon.io/app/#/select или подобный. загрузите SVG, нажмите «создать шрифт», включите файлы шрифтов и CSS на свою сторону и просто используйте и стилизуйте его, как любой другой текст. Я всегда так использую, потому что это делает стиль намного проще.
РЕДАКТИРОВАТЬ: Как упоминалось в статье, прокомментированной @ CodeMouse92, шрифты значков портят программы чтения с экрана (и, возможно, вредны для SEO). Так что скорее придерживайтесь SVG.
источник
SVG маска на элементе box с цветом фона приведет к:
Примечание. Маски SVG не поддерживаются в браузерах Internet Explorer.
источник
Вы можете изменить окраску SVG с помощью CSS, если вы используете некоторые приемы. Я написал небольшой сценарий для этого.
приведенный выше код может работать неправильно, я реализовал это для элементов с фоновым изображением SVG, которое работает почти так же, как это. Но в любом случае вы должны изменить этот скрипт, чтобы он соответствовал вашему случаю. надеюсь, это помогло.
источник
Целевой путь в SVG:
Вы можете сделать inline, например:
Или
источник
Чтобы просто изменить цвет svg:
Перейдите в файл svg и в разделе стилей укажите цвет заливки.
источник
Если вы хотите сделать это для встроенного SVG, который, например, фоновое изображение в вашем CSS:
конечно, замените ... своим встроенным кодом изображения
источник
Например, в вашем HTML:
Используйте jQuery:
источник
На самом деле, есть более гибкое решение этой проблемы: написание веб-компонента, который будет исправлять SVG как текст во время выполнения. Также опубликовано в Gist со ссылкой на JSFiddle
источник
кратчайший Bootstrap-совместимый способ, без JavaScript:
и используйте это как:
источник
Откройте ваше изображение с помощью браузера, щелкните правой кнопкой мыши на изображении, нажмите на источник просмотра страницы, и вы увидите тег svg изображения. Справиться и вставить в свой HTML, а затем изменить заливку на цвет по вашему выбору
источник
Просто добавьте fill: "requiredColor" в тег svg изображения: пример:
источник