SVG: Используем стили CSS
Немного о CSS внутри SVG-документа мы упомянули в статье о структуре файла.
Продолжим изучение темы при использовании стандартных стилей CSS.
Фон в SVG является прозрачным. Можно через CSS указать нужный фон.
svg {
background: #fcedd6;
}
Можно вынести свойства в отдельный блок style в html-документе.
<style>
#sample rect {
fill: yellow;
stroke: green;
stroke-width: 4;
transition: all 350ms;
}
#sample rect:hover {
fill: magenta;
}
</style>
<svg id="sample" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<rect x="4" y="4" />
</svg>
При наведении мыши цвет изменится (мы определили :hover).
Можно сослаться на внешний CSS-файл.
<?xml-stylesheet type="text/css" href="style.css"?>
Элементы SVG могут быть сгруппированы с помощью элемента
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"> <g style="fill:red; stroke:blue; stroke-width:4; fill-opacity: 0.5;"> <rect x="90" y="5"/> <circle cx="70" cy="50" r="44"/> </g> </svg>
Рассмотрим практичный. Создадим цветочный орнамент.
Измените ширину браузера, чтобы увидеть изменения в SVG-картинкеФигура состоит из множества элементов path, которым можно присвоить идентификатор id. А затем мы можем настроить нужный элемент через CSS (как внутри SVG, так и в HTML-документе).
Далее, мы можем дать другой цвет нужному элементу, например, нижнему левому фрагменту.
path#left-outer-flourish {
opacity: 0.6;
fill: #f00;
}
Также можем управлять видимостью элементов, используя медиа-запросы.
svg#flourish path {
transition: .6s opacity;
}
@media screen and (max-width: 900px) {
path#right-outer-flourish, path#left-outer-flourish {
opacity: 0;
}
}
Если теперь постепенно уменьшать ширину окна браузера, то можно заметить, как исчезают отдельные элементы орнамента.
Источник: the new code – Create Adaptive SVG Illustrations With CSS
Стили можно выносить не только в html-документ или отдельный файл, но и внутри самой SVG-разметки. В веб-документе указывать type не обязательно, но если SVG сохраняется в отдельном файле, то лучше его использовать, чтобы векторные редакторы правильно обрабатывали документ.
<svg >
<title>Светофор</title>
<style type="text/css">
rect, circle {
stroke: black;
stroke-width: 3;
}
.light {
stroke-width: 2;
}
</style>
<rect x="20" y="20" />
<g>
<circle cx="70" cy="80" r="30" />
<circle cx="70" cy="160" r="30" />
<circle cx="70" cy="240" r="30" />
</g>
</svg>
СветофорВ этом примере стиль класса light переопределяет толщину обводки, заданную для фигур rect и circle.
Управление контурами через CSS
Вернуться в раздел SVG
Реклама
Типы CSS и уровень приоритета для стилей
Здесь мы обсудим различные типы объявленных свойств стиля и их приоритет над другими. CSS дает гибкость в использовании различных свойств стиля локально, переопределяя глобальные объявленные значения или объявленные стили во внешней таблице стилей.Начнем с типов стилей. В основном есть три типа
Встроенная таблица стилей или встроенные стили
Внутренняя таблица стилей
У нас также есть еще два типа стилей на стороне клиента. Один из них определяется пользователем, а другой — стилем браузера по умолчанию. Тогда большой вопрос, почему так много стилей? Если определено более одного стиля, то какой из них будет использоваться? Для этого определяется уровень приоритета, и на основе этого приоритета включается свойство стилей.
- Пользовательский стиль
- Встроенная или встроенная таблица стилей
- Внутренняя таблица стилей
- Внешняя таблица стилей
- Стиль браузера по умолчанию
Эти три типа стилей мы обсудим подробнее. Внутри этих трех стилей ( встроенный , внутренний и внешний ) порядок приоритета сначала встроенный, затем внутренний и последний приоритет отдается внешним стилям. Это самое большое преимущество, поскольку мы можем переопределить свойство глобального стиля и определить его локально. Давайте начнем изучать каждый из этих трех типов CSS.Встроенный стиль
Мы добавляем стили в наши теги HTML. Это имеет наивысший приоритет, чем внутренние и внешние определенные стили. Давайте попробуем добавить стиль фона к одному тегу h5.Это тег h5
Внутренний стиль
Этот тип стиля определяется внутри тега body страницы. Определенный здесь стиль имеет приоритет над внешними стилями, но после встроенных стилей. Вот пример внутренних стилей.<голова>DEMO: Жирный тег с изменением размера шрифта по внутреннему стилю→(Введите здесь название своей страницы) <тип стиля="текст/CSS"> <тело>Это контент, и его стиль определен
во внутренней таблице стилей
Внешние таблицы стилей
Эти стили хранятся отдельно и вызываются или связываются с нужной страницы. Это синтаксис, используемый для связывания внешней таблицы стилей.Вышеупомянутый тег должен быть помещен в теги заголовка страницы. Мы можем хранить детали нашего стиля в файле с именем style.css. Смотрите ссылку на файл. Детали пути должны быть указаны для включения таблицы стилей.
Генератор кода CSS → ←Преимущество CSS Ссылки без подчеркивания по стилю →
Эта статья написана командой plus2net.com .
plus2net.com
| Щелкните, чтобы просмотреть дополнительные руководства по HTML-тегу Div |
|---|
| Нет | 04-07-2012 |
| Сантош Ратод | 05-03-2013 |
| good explanation about priority. .. | |
| gautham.m thirumangalam | 16-04-2013 |
| i have clearly know about this | |
| Хабиб Магомед | 30-03-2015 |
| Я до сих пор не понимаю, почему существуют разные уровни CSS!!! | |
| Сейед Джафар Мортазави | 18-10-2018 |
| Привет всем, Поскольку я искал эту тему, чтобы написать статью, и я увидел эту статью в своем исследовании, я хотел бы поделиться своими полученными знаниями со всеми вами. Надеюсь, это будет полезно для вас. Поскольку статья немного длинная, я отправил ее двумя или тремя сообщениями. *** Типы CSS *** | |