Как изменить цвет SVG в CSS
В этой статье рассмотрим несколько примеров, как задать цвет любому изображению в формате svg с использованием css-стилей.
Есть множество вариантов, как использовать SVG. От того, как вы применяете SVG и будет зависеть способы редактирования.
Давайте начнем с базы.
Основы
Что такое SVG?
SVG (Scalable Vector Graphic) — масштабируемая векторная графика. Это уникальный формат для изображений. В отличии от привычных нам форматов, в svg не используются пиксели. Здесь картинка строется на векторах. Это значит, что вы можете, например, масштабирать размер картинки до любых значений и при этом не терять качество.
Изображение svg можно вставить кодом прямо в файл html — это будет инлайновый вариант:
А можно вставить через тег img:
Если заглянуть «под капот» и изучить код, который отвечает за отрисовку SVG, то можно выделить два свойства, которые отвечают за цвет — fill (заливка) и stroke (обводка). Их можно редактировать и тем самым менять цвет иконки.
Давайте выделим несколько методов, которые позволяют менять цвет SVG.
1. Меняем цвет с помощью свойства fill
Смотрите, у нас два квадрата — они идентичны, за исключением свойства fill. В одном случае мы залили квадрат красным цветом, в другом вообще не прописали это свойство.
Свойство fill можно применять к отдельному вектору в вашем изображении.
2. Меняем цвет в файле style.css
Или в любом другом файле css, который подключен к html.
Замена button type=»button» на картинку
Проще говоря — есть стандартная кнопка — button type=»button» которую нужно заменить на картинку. Сначала думал, что не сложно, теперь. ) Подскажите, пожалуйста, способ решения проблемы.
Отслеживать
задан 1 дек 2011 в 5:57
Богдан Остапчук Богдан Остапчук
301 3 3 золотых знака 7 7 серебряных знаков 20 20 бронзовых знаков
А в чем проблемы (если можно, то с примером)
1 дек 2011 в 6:30
Спасибо за помощь — все решилось. Просто изначально неправильно начинал делать, теперь же все ясно.
1 дек 2011 в 6:36
А как привязать ссылку без CSS&
7 ноя 2019 в 17:46
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Есть , в нем можно использовать , например:
Отслеживать
ответ дан 1 дек 2011 в 6:28
chernomyrdin chernomyrdin
4,188 15 15 серебряных знаков 16 16 бронзовых знаков
Можно и так, но через стили будет универсальнее, т.к. оформление отделено от разметки. А во-вторых, можно добавить дополнительные фичи, например изменение картинки при наведении или нажатии.
1 дек 2011 в 6:38
А так не работает?
input[type="button"]
Отслеживать
ответ дан 1 дек 2011 в 6:11
invincible invincible
1,900 12 12 серебряных знаков 13 13 бронзовых знаков
Вот еще примерчик, для наглядности преимущества реализации через таблицу стилей: jsfiddle.net/invincible/zfhrP/2
1 дек 2011 в 6:48
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
content
Вычисляется none для псевдоэлементов ::before и ::after .
Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, \000A9 представляет собой символ авторского права.
URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображён, он игнорируется или отображается значение по умолчанию.
(en-US), указанный типом данных () или (en-US), или частью веб-страницы, определяемой функцией element() (en-US), указывающей содержимое для обозначения.
Значение CSS счётчика, как правило число. Его можно отобразить с помощью функций counter() (en-US) или counters() (en-US).Функция counter() имеет две формы записи: ‘counter(имя)’ или ‘counter(имя, стиль)’. Сгенерированный текст — это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal ).Функция counters() также имеет две формы записи: ‘counters(name, string)’ или ‘counters(name, string, style)’. Сгенерированный текст — это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию decimal ).
Значение атрибута x элемента в виде строки. Если атрибут x отсутствует, вернётся пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.
Эти значения заменяются соответствующей строкой из свойства quotes (en-US).
Не вводит никакого содержимого, но увеличивает (уменьшает) уровень вложенности для кавычек.
Синтаксис
content =
normal | (en-US)
none | (en-US)
[ (en-US) | (en-US) ] (en-US) [ (en-US) / [ (en-US) (en-US) | (en-US) ] (en-US) + (en-US) ] (en-US) ? (en-US) | (en-US)
element( )
=
| (en-US)
=
counter( , ? (en-US) )
=
counters( , (en-US) , ? (en-US) )
=
| (en-US)
=
symbols( ? (en-US) [ (en-US) (en-US) | (en-US) ] (en-US) + (en-US) )
=
cyclic | (en-US)
numeric | (en-US)
alphabetic | (en-US)
symbolic | (en-US)
fixed
=
| (en-US)
(en-US)
=
| (en-US)
=
url( (en-US) * (en-US) ) | (en-US)
=
src( (en-US) * (en-US) )
Примеры
Заголовки и двойные кавычки
В этом примере вставляются кавычки вокруг кавычек а добавляет слово «Глава» перед заголовками.
HTML
h1>5h1> p> According to Sir Tim Berners-Lee, q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet" >I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.q > We must understand that there is nothing fundamentally wrong with building on the contributions of others. p> h1>6h1> p> According to the Mozilla Manifesto, q cite="http://www.mozilla.org/en-US/about/manifesto/" >Individuals must have the ability to shape the Internet and their own experiences on the Internet.q > Therefore, we can infer that contributing to the open web can protect our own individual experiences on it. p>
CSS
q color: blue; > q::before content: open-quote; > q::after content: close-quote; > h1::before content: "Chapter "; /* Пробел в конце создаёт разделение между добавленным контентом и остальным контентом*/ >
Результат
Изображение в сочетании с текстом
В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.
HTML
a href="http://www.mozilla.org/en-US/">Mozilla Home Pagea>
CSS
a::before content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: "; font: x-small Arial, sans-serif; color: gray; >
Результат
Целевые классы
В этом примере вставляется дополнительный текст после указанных элементов списка.
HTML
h2>Paperback Best Sellersh2> ol> li>Political Thrillerli> li class="new-entry">Halloween Storiesli> li>My Biographyli> li class="new-entry">Vampire Romanceli> ol>
CSS
.new-entry::after content: " New!"; /* Начальный пробел создаёт разделение между добавленным контентом и остальным контентом */ color: red; >
Результат
Атрибуты изображений и элементов
В этом примере вставляется изображение перед каждой ссылкой и добавляет id атрибут после.
HTML
ul> li>a id="moz" href="http://www.mozilla.org/"> Mozilla Home Pagea>li> li> a id="mdn" href="https://developer.mozilla.org/"> Mozilla Developer Networka > li> ul>
CSS
a text-decoration: none; border-bottom: 3px dotted navy; > a::after content: " (" attr(id) ")"; > #moz::before content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); > #mdn::before content: url("mdn-favicon16.png"); > li margin: 1em; >
Результат
Замена элемента
В этом примере содержимое элемента заменяется изображением. Вы можете заменить содержимое элемента либо значением или изменить значение . Содержимое, добавленное с помощью ::before или ::after не будет сгенерировано, поскольку содержимое элемента будет заменено.
HTML
div id="replaced">Mozilladiv>
CSS
#replaced content: url("mdn.svg"); > #replaced::after /* не будет отображаться, если замена элемента поддерживается */ content: " (" attr(id) ")"; >
Результат
Проблемы доступности
Сгенерированный CSS контент не включён в DOM. Из-за этого он не будет представлен в accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ.
- Accessibility support for CSS generated content – Tink
- Explanation of WCAG, Guideline 1.3 – MDN (en-US)
- Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
Спецификации
| Specification |
|---|
| CSS Generated Content Module Level 3 # content-property |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как заменить img=src на другое изображение посредством CSS?
Требуется заменить через CSS (не трогая HTML) картинку на другую по ссылке — как это оптимальнее сделать?
- Вопрос задан более трёх лет назад
- 5915 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 4
Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку
Картинку скрыть.
Показать фон у блока.
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
I want, women not to get sick
Урл ни как не изменить через css
Но в css можно указать background-image
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Алина Андреева @linacat2305 Автор вопроса
Пробовала, изображение не меняется:
.block < width:150px; border:1px solid black; text-align:center; >img< display:block; margin-left:auto; margin-right:auto; background-image: url(. /79x115/el_sku_R0X401_79x115_0.jpg);Ответ написан более трёх лет назад
у изображения не может быть background в самом низу есть правильный ответ . скрыть img и показать background-image
