Хобрук: Ваш путь к мастерству в программировании

Изображение/SVG изменить цвет?

Итак, я что-то разрабатывал и решил использовать SVG. Тем не менее, для моего приложения есть несколько тем, могу ли я изменить цвет SVG, например, белый, на черный, через css? Я не смотрю на фильтрацию, так как не могу применить, поэтому все изображение сплошь красное. Например, у меня есть изображение, svg или нет, с белой иконкой. Но вместо этого я хочу красный значок. Есть какой-либо способ сделать это? Я предпочитаю не использовать встроенный svg, так как это усложнит настройку. Если вам потребуются какие-либо разъяснения, пожалуйста, сообщите мне. заранее спасибо

EDIT: Дополнительный код:

<img class="fullscreen" src="assets/icons/ic_fullscreen.svg" />

EDIT: JSFiddle: http://jsfiddle.net/MashedPotatoes/s2gs3t16/1/

svg html css
18.10.2015

  • Пожалуйста, опубликуйте jsfiddle 18.10.2015
  • Я добавил скрипку сейчас 18.10.2015
  • Пожалуйста, добавьте svg в jsfiddle 18.10.2015
  • Я сделаю так, но мне придется использовать встроенный svg, так как я плохо загружаю изображения в imgur :). Однако я совершенно уверен, что вы поняли идею, я могу объяснить. 18.10.2015
  • Я хочу немного уточнить. Я использую файл svg в своем проекте, доступ к которому осуществляется через тег <image>. Я хочу иметь возможность изменить цвет заливки svg. 18.10.2015
  • Вы можете изменить цвет, я надеюсь, что эти ссылки могут вам помочь. (css-tricks.com/cascading-svg-fill-color) и (stackoverflow.com/questions/11978995/) 18.10.2015
  • Давайте продолжим обсуждение в чате. 18.10.2015

Ответы:


1

Я действительно столкнулся с той же проблемой несколько месяцев назад. В конце концов я написал что-то, что дало мне то, что мы оба искали — использовать один и тот же SVG и использовать CSS для изменения его цвета. Идея состоит в том, что вы создаете его с помощью <object>, а затем выполняете некоторые манипуляции с DOM с его содержимым, чтобы заменить его на <div> и, таким образом, предоставить доступ к содержимому.

Я написал небольшой пост о процессе здесь - вы могли увидеть решение и взять то, что вам нужно. Кроме того, код является директивой в AngularJS, поэтому он может вам не подойти, но идея та же, вы можете взять его и использовать в Javascript/Jquery.

Если вы используете Angular:

Вы можете использовать этот компонент — ngReusableSvg.

18.10.2015
  • Спасибо! Я рассмотрю вашу статью. 18.10.2015
  • Круто, с удовольствием воспользуюсь. Но я не использую angular, и я также динамически меняю источник изображения... Можете ли вы немного помочь? 18.10.2015

    • 2

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

    clip-path: url(#clipping) http://codepen.io/yoksel/full/fsdbu/

    19.10.2015
    Новые материалы
    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..