Css fill: fill — SVG: Scalable Vector Graphics

заливка и обводка • Про CSS

Содержание:

fill

fill-rule

fill-opacity

stroke

stroke-width

stroke-linecap

stroke-linejoin

stroke-dasharray

stroke-dashoffset

stroke-opacity

В SVG заливка и обводка имеют много разных интересных опций, которые предоставляют возможности гораздо шире того, что есть в CSS.

Например, можно нарисовать SVG-паттерн и использовать его не только в заливке, но и в обводке. Заливке и обводке можно указывать разную прозрачность, также можно управлять пунктирной обводкой, на чем можно построить интересные анимированные эффекты.

В качестве заливки и обводки можно задавать none, цвета, ключевые слова (currentColor и transparent), а также градиенты и паттерны.

fill

Заливка элемента.

Возможные значения: none, ключевые слова, цвета, паттерны и градиенты. Значение по умолчанию — black.

<svg>
  <defs>
    <symbol>
      <rect/>
    </symbol>
    <linearGradient
      x1="0%" y1="0%"
      x2="0%" y2="90%"
    >
      <stop offset="0%" stop-color="yellowgreen" />
      <stop offset="90%" stop-color="green" />
    </linearGradient>
  </defs>
  <use xlink:href="#s-rect"
    x="20" y="20"
    fill="hsla(348, 83%, 47%,.3)"/> <!-- HSLA -->
  <use xlink:href="#s-rect"
    x="110" y="20"
    fill="rgb(255, 215, 0)"/> <!-- RGB -->
  <use xlink:href="#s-rect"
    x="20" y="110"
    fill="url(#g-green)"/> <!-- Градиент -->
  <use xlink:href="#s-rect"
    x="110" y="110"
    fill="skyblue"/> <!-- Цвет по названию -->
</svg>

fill-rule

Свойство определяет как будут заливаться сложные фигуры, имеющие пересечения внутри себя. Для простых фигур ни на что не влияет.

Возможные значения: nonzero, evenodd

fill-rule="nonzero"

fill-rule="evenodd"

fill-rule="nonzero" интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальется полностью (справа):

fill-opacity

Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк, смотреть в FF).

<!-- ... -->
<use xlink:href="#s-rect"
  x="20" y="20"
  fill="url(#g-red)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="50" y="50"
  fill="hsl(50, 100%, 50%)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="80" y="80"
  fill="url(#g-green)" fill-opacity=".5"/>
<!-- ... -->

stroke

Цвет обводки. Значения по умолчанию нет.

<svg>
  <rect x="20" y="20"
    fill="none"
    stroke="yellowgreen"/>
</svg>

stroke-width

Толщина обводки, можно задавать в единицах длины или в процентах. Значение по умолчанию: 1.

<svg>
  <rect x="50" y="50"
    fill="none" stroke="gold"
    stroke-width="10"/>
  <rect x="20" y="20"
    fill="none" stroke="yellowgreen"
    stroke-width="10%"/>
</svg>

stroke-linecap

Свойство определяет как будут выглядеть концы линий. Возможные значения: butt, round, square. Значение по умолчанию: butt.

<!-- ... -->
  <use xlink:href="#s-path" stroke="orangered" y="20"
    stroke-linecap="butt"/>
  <use xlink:href="#s-path" stroke="olivedrab" y="85"
    stroke-linecap="round"/>
  <use xlink:href="#s-path" stroke="steelblue" y="150"
    stroke-linecap="square"/>
<!-- ... -->

stroke-linejoin

Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter, round, bevel. Значение по умолчанию: miter.

<!-- ... -->
  <use xlink:href="#s-corner" stroke="orangered" y="0"
    stroke-linejoin="miter"/>
  <use xlink:href="#s-corner" stroke="olivedrab" y="80"
    stroke-linejoin="round"/>
  <use xlink:href="#s-corner" stroke="steelblue" y="160"
    stroke-linejoin="bevel"/>
<!-- .  .. -->

stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray="1" нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.

Примеры разных пунктирных линий:

<svg>
  <path d="M 20 20 h 260"
    stroke="purple" stroke-width="1"
    stroke-dasharray="1" />
  <path d="M 20 40 h 260"
    stroke="mediumspringgreen" stroke-width="15"
    stroke-dasharray="1 3" />
  <path d="M 20 60 h 260"
    stroke="orangered" stroke-width="1"
    stroke-dasharray="5%" />
  <path d="M 20 80 h 260"
    stroke="green" stroke-width="1"
    stroke-dasharray="1 5" />
  <path d="M 20 100 h 260"
    stroke="steelblue" stroke-width="1"
    stroke-dasharray="2 7 6" />
  <path d="M 20 120 h 260"
    stroke="orange" stroke-width="5"
    stroke-dasharray="5" />
  <path d="M 20 140 h 260"
    stroke="mediumseagreen" stroke-width="1"
    stroke-dasharray="12% 5%" />
</svg>

Используя обводку и простые фигуры можно получить удивительные вещи:

Также stroke-dasharray интересно сочетается с анимацией:

stroke-dashoffset

Свойство позволяет задать смещение пунктирной обводки относительно первоначального положения. Значение задается в единицах длины или в процентах, значения могут быть отрицательными. Значение по умолчанию: 0.

В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:

<svg>
  <g fill="none"
    stroke-width="15"
    stroke-dasharray="25% 110%"
    transform="rotate(72 135 135)">
    <circle r="115" cx="135" cy="135"
      stroke="crimson"/> <!-- Красная обводка без смещения -->
    <circle r="115" cx="135" cy="135"
      stroke="orangered"
      stroke-dashoffset="25%"/> <!-- Оранжевая обводка смещена на 25% -->
    <circle r="115" cx="135" cy="135"
      stroke="gold"
      stroke-dashoffset="50%"/> <!-- Желтая обводка смещена на 50% -->
  </g>
</svg>

Сочетая stroke-dashoffset и stroke-dasharray можно получить интересные эффекты.

Для полноценного просмотра воспользуйтесь браузерами на Webkit. Ссылка на полную версию.

Для перезапуска нажмите Rerun.

Несколько вдохновляющих ссылок про анимацию на stroke-dashoffset:

• How SVG Line Animation Works
• Animated line drawing in SVG
• SVG Drawing Animation

stroke-opacity

Прозрачность обводки. Задаются значения от 0.0 до 1.0.

<svg>
  <g fill="none"
    stroke-width="15">
    <circle r="40" cx="60" cy="60"
      stroke="crimson"
      stroke-opacity=".7"/>
    <circle r="55" cx="100" cy="100"
      stroke="orangered"
      stroke-opacity=".5" />
    <circle r="40" cx="140" cy="140"
      stroke="gold"
      stroke-opacity=".25"/>
  </g>
</svg>

Анимация обводки позволяет получить совершенно удивительные вещи. Правда, я в своих примерах использовала CSS (и это демо не играет в Firefox) и SVG-анимацию, которая работает таки везде, но задается странно, длинно и неудобно. Думаю, что оптимальнее всего для анимации SVG использовать JavaScript-библиотеки.

Ссылки по теме:

w3.org/TR/SVG

Метки:

SVG

←SVG-pathSVG-иконки→

CSS animation fill mode

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯

Пример

Пусть элемент <div> сохранит значения стиля из последнего ключевого кадра при завершении анимации:

div {
    animation-fill-mode: forwards;
}

Подробнее примеры ниже.

Определение и использование

Свойство animation-fill-mode задает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и того, и другого).

Анимация CSS не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство animation-fill-mode может переопределить это поведение.

Значение по умолчанию:	none
Inherited:	no
Animatable:	no. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.animationFillMode=»forwards»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

Синтаксис CSS

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Значения свойств

Значение	Описание
none	Значение по умолчанию. Анимация не будет применять стили к элементу до или после выполнения
forwards	Элемент сохранит значения стиля, заданные последним ключевым кадром (в зависимости от направления анимации и анимации-количество итераций)
backwards	Элемент получит значения стиля, заданные первым ключевым кадром (в зависимости от направления анимации), и сохранит его во время периода задержки анимации
both	Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Пусть элемент <div> получает значения стиля, заданные первым ключевым кадром до начала анимации (во время периода задержки анимации):

div {
    animation-fill-mode: backwards;
}

Пример

Пусть элемент <div> получает значения стиля, заданные первым ключевым кадром до начала анимации, и сохраняет значения стилей из последнего ключевого кадра при завершении анимации:

div {
    animation-fill-mode: both;
}

Похожие страницы

CSS Справочник: CSS Анимация

HTML DOM Справочник: animationFillMode Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.

Правила и Условия Политика конфиденциальности О нас Контакты

заполнение — SVG: Масштабируемая векторная графика

Атрибут fill имеет два различных значения. Для фигур и текста это атрибут представления, который определяет цвет ( или любые серверы рисования SVG, такие как градиенты или узоры ), используемый для рисования элемента; для анимации он определяет конечное состояние анимации.

Этот атрибут можно использовать со следующими элементами SVG:

• <круг>
• <эллипс>
• <путь>
• <многоугольник>
• <полилиния>
• <прямоугольник>
• <текст>
• <треф>

Для анимации эти элементы используют этот атрибут: , , , и .

 html,
тело,
свг {
  высота: 100%;
}
 

Предупреждение: Начиная с SVG2 устарел и не должен использоваться.

Для , fill — это атрибут представления, определяющий цвет глифа.

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Для , fill определяет конечное состояние анимации.

Предупреждение: Начиная с SVG Animation 2 устарел и не должен использоваться. Вместо этого используйте .

Для , fill определяет конечное состояние анимации.

Для , fill определяет конечное состояние анимации.

Для , fill определяет конечное состояние анимации.

Для , fill — это атрибут представления, определяющий цвет круга.

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Для , fill — это атрибут представления, определяющий цвет эллипса.

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Для , fill — это атрибут представления, определяющий цвет внутренней части фигуры. ( Интерьер определяется атрибутом правила заполнения )

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Для <полигон> , fill — это атрибут представления, определяющий цвет внутренней части фигуры. ( Интерьер определяется атрибутом правила заполнения )

Примечание: В качестве атрибута представления fill можно использовать как свойство CSS.

Для , fill — атрибут представления, определяющий цвет внутренней части фигуры. ( Интерьер определяется атрибутом правила заполнения )

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Для , fill — это атрибут представления, определяющий цвет прямоугольника.

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Для , fill определяет конечное состояние анимации.

Для , fill — это атрибут представления, определяющий цвет текста.

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Для , fill — атрибут представления, определяющий цвет текста.

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Предупреждение: Начиная с SVG2 устарел и не должен использоваться.

Для , fill — это атрибут представления, определяющий цвет текста.

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Для , fill — это атрибут представления, определяющий цвет текста.

Примечание: В качестве атрибута представления заливка может использоваться как свойство CSS.

Таблицы BCD загружаются только в браузере

 /* Значения ключевых слов */
заполнение столбца: авто;
заполнение столбца: баланс;
заполнение столбца: сбалансировать все;
/* Глобальные значения */
заполнение столбца: наследовать;
заполнение столбца: начальный;
заполнение столбца: вернуться;
заполнение столбца: обратный слой;
заполнение столбца: не установлено;
 

 column-fill = 
 auto | 
 баланс | 
 balance-all 

 

  Этот абзац заполняет столбцы по одному.  Так как весь текст может поместиться в
  первый столбец, остальные пустые.

<р>
  Этот абзац пытается сбалансировать количество контента в каждой колонке.

 

 р {
  высота: 7см;
  фон: #ff9;
  столбцы: 3;
  правило столбца: сплошной 1px;
}
p.fill-авто {
  заполнение столбца: авто;
}
p.fill-баланс {
  заполнение столбца: баланс;
}