Изменить цвет встроенного SVG внутри тега <img>

Мне было интересно, можно ли изменить цвет изображения/значка/логотипа SVG во встроенном теге html <img>, используя style="..."

Вот часть моего кода: это кнопка, и я хочу, чтобы логотип (только SVG) имел указанный цвет.

<a href = "#" class = "nav-link btn btn-outline-secondary d-flex border-0 w-100" style = "color:#39384A;" data-toggle = "tooltip" data-placement = "right" title = "Discord">
  <img class = "m-auto" src = "https://www.svgrepo.com/show/353655/discord-icon.svg" style = "color:#39384A;">
</a>

Как видите, цвет не меняется, он остается цветом SVG-файла.

Мне нужно, чтобы он был встроенным, поскольку у меня нет доступа к листу CSS для изменения CSS определенных тегов и классов (не мой веб-сайт, настройка ограничена).

Спасибо!

Эй, вы не можете применять цвета напрямую, но вы можете поиграть со свойством фильтра CSS, чтобы изменить изображение svg, используя встроенный стиль. вот очень полезная ссылка, которая может сгенерировать для вас CSS. codepen.io/sosuke/pen/Pjoqqp

— 04.06.2024 07:41

html css svg bootstrap-5 inline

02.06.2024 10:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете изменить цвет внешнего SVG-файла напрямую с помощью атрибута style тега <img>.

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

Вот как вы можете это сделать:

Загрузите файл SVG.
Откройте файл SVG и скопируйте его содержимое.
Вставьте содержимое SVG прямо в HTML.
Примените изменение цвета с помощью CSS.

Вот ваш модифицированный код со встроенным и стилизованным содержимым SVG:

<a href = "#" class = "nav-link btn btn-outline-secondary d-flex border-0 w-100" data-toggle = "tooltip" data-placement = "right" title = "Discord">
  <svg width = "800px" height = "800px" viewBox = "0 -28.5 256 256" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" preserveAspectRatio = "xMidYMid">
    <g>
      <path d = "M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill = "#39384A" fill-rule = "nonzero">
      </path>
    </g>
  </svg>
</a>

Обратите внимание на style = "fill:#39384A;", который изменит SVG на указанный цвет.

02.06.2024 10:32