Рисование

Разбить на страницы

Показывать лекцию целиком

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

Заливка

Заливка цветом может применяться к фигурам, тексту и элементам Path. При указании цвета допустимы именованные названия (см. Приложение 1), а также RGB - код в десятичной или шестнадцатеричной формах. В табл. 5.1 приводится описание основных атрибутов заливки.

Атрибуты заливки
№	Название
5.1.1	`fill`
	Описание
	Заливка цветом внутренней части фигуры или текста
	Диапазон значений
	Именованные названия, десятичный или шестнадцатеричный индекс цвета
	Значение по умолчанию
	Черный (black)
№	Название
5.1.2	`fill-opacity`
	Описание
	Прозрачность заливки
	Диапазон значений
	Число между `0` (полная прозрачность) и `1` (полная непрозрачность)
	Значение по умолчанию
	`1`
№	Название
5.1.3	`fill-rule`
	Описание
	Режим заливки фигуры, при которой остаются пустые (незакрашенные) области.
	Диапазон значений
	`nonzero \| evenodd` `nonzero` - полная заливка. `evenodd` - заливка с пустыми областями.
	Значение по умолчанию
	`nonzero`

Ранее мы пользовались при заливке только атрибутом fill. Следовательно, мы имели дело с полностью непрозрачными объектами, заполняемыми цветом полностью. В табл. 5.2 приводятся примеры использования атрибутов заливки.

Атрибуты fill, fill-opacity и fill-rule
№	Код	Вид в браузере
5.2.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="210" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill1.svg </desc> <rect x="0" y="25" width="210" height="50"></rect> <rect x="10" y="0" width="10" height="100" fill="red" fill-opacity="0.1"></rect> <rect x="30" y="0" width="10" height="100" fill="red" fill-opacity="0.2"></rect> <rect x="50" y="0" width="10" height="100" fill="red" fill-opacity="0.3"></rect> <rect x="70" y="0" width="10" height="100" fill="red" fill-opacity="0.4"></rect> <rect x="90" y="0" width="10" height="100" fill="red" fill-opacity="0.5"></rect> <rect x="110" y="0" width="10" height="100" fill="red" fill-opacity="0.6"></rect> <rect x="130" y="0" width="10" height="100" fill="red" fill-opacity="0.7"></rect> <rect x="150" y="0" width="10" height="100" fill="red" fill-opacity="0.8"></rect> <rect x="170" y="0" width="10" height="100" fill="red" fill-opacity="0.9"></rect> <rect x="190" y="0" width="10" height="100" fill="red" fill-opacity="1"></rect> </svg>
	Описание
	Полоски с различными значениями прозрачности.
№	Код	Вид в браузере
5.2.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="210" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill2.svg </desc> <rect x="0" y="25" width="210" height="50"></rect> <rect x="10" y="0" width="10" height="100" style="fill:red; fill-opacity:0.1"></rect> <rect x="30" y="0" width="10" height="100" style="fill:red; fill-opacity:0.2"></rect> <rect x="50" y="0" width="10" height="100" style="fill:red; fill-opacity:0.3"></rect> <rect x="70" y="0" width="10" height="100" style="fill:red; fill-opacity:0.4"></rect> <rect x="90" y="0" width="10" height="100" style="fill:red; fill-opacity:0.5"></rect> <rect x="110" y="0" width="10" height="100" style="fill:red; fill-opacity:0.6"></rect> <rect x="130" y="0" width="10" height="100" style="fill:red; fill-opacity:0.7"></rect> <rect x="150" y="0" width="10" height="100" style="fill:red; fill-opacity:0.8"></rect> <rect x="170" y="0" width="10" height="100" style="fill:red; fill-opacity:0.9"></rect> <rect x="190" y="0" width="10" height="100" style="fill:red; fill-opacity:1"></rect> </svg>
	Описание
	Полоски с различными значениями прозрачности, оформление при помощи атрибута style.
№	Код	Вид в браузере
5.2.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="210" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill3.svg </desc> <rect x="0" y="25" width="210" height="50" ></rect> <g style="fill:red; fill-opacity:0.6"> <rect x="10" y="0" width="10" height="100"></rect> <rect x="30" y="0" width="10" height="100"></rect> <rect x="50" y="0" width="10" height="100"></rect> <rect x="70" y="0" width="10" height="100"></rect> <rect x="90" y="0" width="10" height="100"></rect> <rect x="110" y="0" width="10" height="100"></rect> <rect x="130" y="0" width="10" height="100"></rect> <rect x="150" y="0" width="10" height="100"></rect> <rect x="170" y="0" width="10" height="100"></rect> <rect x="190" y="0" width="10" height="100"></rect> </g> </svg>
	Описание
	Задание единой прозрачности для группы элементов.
№	Код	Вид в браузере
5.2.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill4.svg </desc> <polygon fill-rule="nonzero" fill="red" stroke="black" points="50,6 18,86 98,38 2,38 82,86"/> <polygon fill-rule="evenodd" fill="red" stroke="black" points="151,6 119,86 199,38 103,38 183,86"/> </svg>
	Описание
	Режимы заливки - полная и с пустыми областями.
№	Код	Вид в браузере
5.2.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill5.svg </desc> <polygon style="fill-rule: nonzero; fill: red; stroke: black;" points="50,6 18,86 98,38 2,38 82,86"/> <polygon style="fill-rule: evenodd; fill: red; stroke: black;" points="151,6 119,86 199,38 103,38 183,86" /> </svg>
	Описание
	Режимы заливки - полная и с пустыми областями, оформление при помощи атрибута `style`.
№	Код	Вид в браузере
5.2.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill6.svg </desc> <!--Фоновый черный прямоугольник--> <rect x="0" y="25" width="250" height="250" ></rect> <!--Непрозрачный текст--> <g font-family="Arial" font-size="40" stroke="white" stroke-width="1"> <text x="10" y="100" fill="red"> Red </text> <text x="10" y="150" fill="yellow"> Yellow </text> <text x="10" y="200" fill="green"> Green </text> </g> <!--Полупрозрачный текст--> <g style="fill:red; fill-opacity:0.6"> <g font-family="Arial" font-size="40" stroke="white" stroke-width="1"> <text x="135" y="100" fill="red"> Red </text> <text x="135" y="150" fill="yellow"> Yellow </text> <text x="135" y="200" fill="green"> Green </text> </g> </g> </svg>
	Описание
	Полностью непрозрачный и частично прозрачный текст на черном фоне. Для оформления текста используются группы.

Линейная градиентная заливка

Линейная градиентная заливка предназначена для получения плавного цветового перехода в направлении, заданной прямой. Элемент linearGradient определяется в области defs, а затем он может быть применен для произвольной фигуры в качестве заливки:

<defs>
  <linearGradient id="MyGradient">
    <stop offset="30%" stop-color="red"/>
    <stop offset="70%" stop-color="yellow"/>
  </linearGradient>
</defs>
<rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/>

Внутри элементов stop задаются цвета градиента в атрибутах stop-color и граница области каждого из цветов в атрибутах offset (рис. 5.1):

(рис 5.1) Определение linearGradient

Атрибут offset определяет области покрытия исходных цветов и формируемого ими промежуточного. Так, на рисунке первый цвет занимает 30%, второй цвет также 30% (100-70=30), а область градиента занимает всю остальную часть, т.е. 40%. В табл. 5.3 приводится примеры с различными значениями атрибута offset.

Элемент linearGradient, атрибут offset.
№	Код	Вид в браузере
5.3.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientoffset1.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Атрибуты `offset` с первыми предельными граничными значениями - 0 и 100%.
№	Код	Вид в браузере
5.3.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientoffset2.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="20%" stop-color="red"/> <stop offset="80%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со значениями - 20 и 80%. Хорошо заметны области чистых цветов.
№	Код	Вид в браузере
5.3.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientoffset3.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="30%" stop-color="red"/> <stop offset="70%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со значениями - 30 и 70%.
№	Код	Вид в браузере
5.3.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientoffset4.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="50%" stop-color="red"/> <stop offset="50%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Атрибуты `offset` со вторыми предельными граничными значениями - 50 и 50%. В этом случае градиент вырождается в две области с чистыми цветами.

В рассмотренных случая мы видели направление градиента только в одном направлении - горизонтальном. Для произвольного направления вводится набор атрибутов x1, x2, y1, y2 следующим образом:

<defs>
  <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="100%" >
    <stop offset="0%" stop-color="red"/>
    <stop offset="100%" stop-color="yellow"/>
  </linearGradient>
</defs>
<rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" />

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

(рис 5.2) Направление градиента

Атрибуты x1, y1 и x2, y2 задают координаты двух точек, в направлении которых будет направлен градиент. При этом для углов области градиента значения атрибутов определяются указанным на рисунке образом. Можно провести аналогию между значениями в процентах и обычными координатами - оси направлены совершенно одинаково. В табл. 5.4 приведены различные предельные случаи направления градиента.

Элемент linearGradient, направление градиента
№	Код	Вид в браузере
5.4.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection1.svg </desc> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="100%" > <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Направление градиента из верхнего левого в правый нижний угол.
№	Код	Вид в браузере
5.4.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection2.svg </desc> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%" > <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Обычное направление градиента, с которым мы уже сталкивались ранее (см. linearGradientoffset1.svg) по умолчанию совпадает с указанными значениями набора атрибутов.
№	Код	Вид в браузере
5.4.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection3.svg </desc> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Направление градиента сверху вниз.
№	Код	Вид в браузере
5.4.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection4.svg </desc> <defs> <linearGradient id="MyGradient" x1="100%" y1="0%" x2="0%" y2="0%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Направление градиента слева направо. В принципе, такое же расположение можно получить, если поменять местами цвета градиента.
№	Код	Вид в браузере
5.4.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection5.svg </desc> <defs> <linearGradient id="MyGradient" x1="0%" y1="100%" x2="0%" y2="0%" > <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Направление градиента снизу вверх.

Для других, промежуточных значений, можно изменять значения атрибутов в диапазоне от 0 до 100%.

Внутри определения градиента можно помещать несколько цветов:

<defs>
  <linearGradient id="MyGradient">
    <stop offset="0%" stop-color="blue"/>
    <stop offset="20%" stop-color="red"/>
    <stop offset="30%" stop-color="orange"/>
    <stop offset="40%" stop-color="yellow"/>
    <stop offset="50%" stop-color="green"/>
    <stop offset="60%" stop-color="deepskyblue"/>
    <stop offset="70%" stop-color="blue"/>
    <stop offset="80%" stop-color="purple"/>
    <stop offset="100%" stop-color="white"/>
  </linearGradient>
</defs>
<rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/>

Таким образом, получается серия цветов, напоминающая радугу (спектр). В табл. 5.5 приводятся различные примеры использования градиента.

Элемент linearGradient, серия цветов, атрибут stop-opacity.
№	Код	Вид в браузере
5.5.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример linearGradientSome1.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Градиент содержащий серию цветов.
№	Код	Вид в браузере
5.5.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример linearGradientSome2.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <circle cx="75" cy="75" r="75" fill="url(#MyGradient)"/> </svg>
	Описание
	Применение градиента к окружности.
№	Код	Вид в браузере
5.5.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример linearGradientSome3.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <rect x="10" y ="5" width="130" height="90" fill="url(#MyGradient)"/> <circle cx="35" cy="120" r="25" fill="url(#MyGradient)" /> <circle cx="115" cy="120" r="25" fill="url(#MyGradient)" /> </svg>
	Описание
	Применение градиента к нескольким фигурам. Распределение цветов масштабируется в зависимости от размеров фигуры.
№	Код	Вид в браузере
5.5.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientSome4.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <text x="10" y="100" font-family="Arial Bold" font-size="90" stroke="black" stroke-width="1" fill="url(#MyGradient)"> Текст </text> </svg>
	Описание
	Заливка градиентом текста.
№	Код	Вид в браузере
5.5.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример linearGradientSome5.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </linearGradient> </defs> <rect x="0" y="10" width="150" height="130"></rect> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибут `stop-opacity` позволяет задавать прозрачность цвета градиента.

Радиальная градиентная заливка

Радиальная градиентная заливка позволяет получать плавное изменение цвета в направлении от центра или к центру окружности.

<defs>
  <radialGradient id="MyGradient">
    <stop offset="0%" stop-color="red"/>
    <stop offset="100%" stop-color="yellow"/>
  </radialGradient>
</defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)" />

Определения радиального и линейного градиентов совпадают, за исключением ключевого слова radialGradient. Графически распределение цвета выглядит так (рис. 5.3):

(рис 5.3) Определение radialGradient

Атрибут offset в данном случае отсчитывается в направлении радиуса окружности. В табл. 5.6 приводятся примеры с различными значениями этого атрибута.

Элемент radialGradient, атрибут offset.
№	Код	Вид в браузере
5.6.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset1.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` с первыми предельными граничными значениями - 0 и 100%.
№	Код	Вид в браузере
5.6.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset2.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="0%" stop-color="yellow"/> <stop offset="100%" stop-color="red"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` с первыми предельными граничными значениями - 0 и 100%. Цвета градиента поменяли местами.
№	Код	Вид в браузере
5.6.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset3.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="20%" stop-color="red"/> <stop offset="80%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со значениями - 20 и 80%. Как и в случае линейного градиента хорошо заметны области чистых цветов.
№	Код	Вид в браузере
5.6.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset4.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="30%" stop-color="red"/> <stop offset="70%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со значениями - 30 и 70%.
№	Код	Вид в браузере
5.6.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset5.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="50%" stop-color="red"/> <stop offset="50%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со вторыми предельными граничными значениями - 50 и 50%. В этом случае градиент вырождается в две радиальные области с чистыми цветами.

Для элемента radialGradient можно задать область распространения непосредственно в его определении, при помощи атрибутов cx, cy и r:

<defs>
  <radialGradient id="MyGradient"  
                  cx="50%" cy="50%" r="25%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="yellow"/>
  </radialGradient>
</defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/>

В этом случае область градиента будет локализована в центре фигуры в окружности с радиусом 25% (рис. 5.4)

(рис 5.4) Локализация радиального градиента

Применять набор этих свойств удобно в случае заливки произвольных, не сферических фигур - радиальная окружность будет присутствовать в области однородного цвета. В табл. 5.7 приводятся примеры использования этих атрибутов.

Элемент radialGradient, атрибуты cx, cy и r.
№	Код	Вид в браузере
5.7.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize1.svg </desc> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Значения атрибутов совпадают с принятыми по умолчанию (см. radialGradientoffset1.svg)
№	Код	Вид в браузере
5.7.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize2.svg </desc> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="25%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Градиент локализован в окружности с радиусом 25%
№	Код	Вид в браузере
5.7.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize3.svg </desc> <defs> <radialGradient id="MyGradient1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> <radialGradient id="MyGradient2" cx="50%" cy="50%" r="25%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <rect height="150" width="150" x="0" y="0" fill="url(#MyGradient1)"/> <rect height="150" width="150" x="0" y="150" fill="url(#MyGradient2)"/> <!--Вспомогательная линия--> <line x1="0" y1="150" x2="150" y2="150" stroke="red" stroke-width="2"/> </svg>
	Описание
	Заливка прямоугольника радиальным градиентом без атрибутов (наверху) и с атрибутами (внизу).
№	Код	Вид в браузере
5.7.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize4.svg </desc> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="75%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/> </svg>
	Описание
	Увеличение площади распространения градиента позволяет выделить его определенную часть.
№	Код	Вид в браузере
5.7.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize5.svg </desc> <defs> <radialGradient id="MyGradient" cx="25%" cy="25%" r="25%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/> </svg>
	Описание
	Отсекание фигурой изображение градиента, локализованного в верхней левой части.
№	Код	Вид в браузере
5.7.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize6.svg </desc> <defs> <radialGradient id="MyGradient" cx="75%" cy="75%" r="25%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/> </svg>
	Описание
	Отсекание фигурой изображение градиента, локализованного в правой нижней части.

В последних двух примерах заметно"обрезанное" расположение области градиента. Для получения эффекта светового блика на фигуре также используется радиальный градиент. Но в этом случае следует применять атрибуты fx и fy, которые подстраивают распространение градиента под геометрические размеры фигуры (табл. 5.8).

Элемент radialGradient, атрибуты fx и fy.
№	Код	Вид в браузере
5.8.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientF1.svg </desc> <defs> <radialGradient id="MyGradient" fx="25%" fy="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Эффект светового блика в левой верхней части фигуры.
№	Код	Вид в браузере
5.8.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientF2.svg </desc> <defs> <radialGradient id="MyGradient" fx="75%" fy="75%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Эффект светового блика в правой нижней части фигуры.

Как и в случае линейного градиента, допускается применение нескольких цветов и управление прозрачностью при помощи атрибута stop-opacity (табл. 5.9)

Элемент radialGradient, серия цветов, атрибут stop-opacity.
№	Код	Вид в браузере
5.9.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome1.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="10%" stop-color="white"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Заливка окружности радиальным градиентом, содержащим серию цветов.
№	Код	Вид в браузере
5.9.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome2.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="10%" stop-color="white"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </radialGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Заливка прямоугольника радиальным градиентом, содержащим серию цветов.
№	Код	Вид в браузере
5.9.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome3.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="10%" stop-color="white"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </radialGradient> </defs> <rect x="10" y ="5" width="130" height="90" fill="url(#MyGradient)"/> <circle cx="35" cy="120" r="25" fill="url(#MyGradient)"/> <circle cx="115" cy="120" r="25" fill="url(#MyGradient)"/> </svg>
	Описание
	Заливка нескольких фигур радиальным градиентом, содержащим серию цветов.
№	Код	Вид в браузере
5.9.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome4.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="10%" stop-color="white"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </radialGradient> </defs> <text x="10" y="100" font-family="Arial Bold" font-size="90" stroke="black" stroke-width="1" fill="url(#MyGradient)"> Текст </text> </svg>
	Описание
	Заливка текста радиальным градиентом.
№	Код	Вид в браузере
5.9.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome5.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </radialGradient> </defs> <rect x="0" y="60" width="150" height="30" ></rect> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Радиальный градиент с нулевой прозрачностью по краям.
№	Код	Вид в браузере
5.9.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome6.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="0%" stop-color="white" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <rect x="0" y="60" width="150" height="30"></rect> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/> </svg>
	Описание
	Радиальный градиент с нулевой прозрачностью в центре.

Паттерны

Элемент pattern предназначен для создания мозаичной графической текстуры, которая может применяться в качестве заливки или контура фигуры. Определение паттерна включает в себя графическое содержимое, которые будут представлять собой мозаику:

<pattern id="MyPattern" x="coordinate" y="coordinate" 
  width="length" height="length"
         patternUnits="userSpaceOnUse | objectBoundingBox" >
  <!-Графическое содержимое-->
</pattern>

Элемент pattern не входит в секцию defs, однако он не может быть отображен в документе непосредственно. Для его включения обязательно требуется фигура с установленными свойствами stroke или fill. В табл. 5.10 приводятся описание атрибутов этого элемента.


№	Название
5.10.1	`x`, `y`
	Описание
	Координаты верхнего левого угла графического элемента, который служит мозаикой в паттерне.
№	Название
5.10.2	`width`, `height`
	Описание
	Ширина и высота площади, которую занимает отдельный элемент мозаики. Визуально этот параметр определяет разреженность или уплотненность паттерна.
№	Название
5.10.3	`patternUnits`
	Описание
	Определение координатной системы для атрибутов `x`, `y`, `width` и `height`. Возможны следующие значения: `userSpaceOnUse` - атрибуты `x`, `y`, `width` и `height` определяются в системе координат той фигуры, для которой будет применяться паттерн. `objectBoundingBox` - атрибуты `x`, `y`, `width` и `height` определяются в системе координат самого паттерна. Если параметр `patternUnits` не указан, то по умолчанию принимается значение `objectBoundingBox`.

В табл. 5.11 приводятся примеры использования паттернов.

Элемент pattern.
№	Код	Вид в браузере
5.11.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример pattern1.svg </desc> <pattern id="MyPattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse"> <circle cx="11" cy="11" r="10" fill="red" stroke="black"/> </pattern> <rect x="2" y="2" width="146" height="146" fill="url(#MyPattern)" stroke="black" stroke-width ="2"/> </svg>
	Описание
	Графическое содержимое паттерна представляет собой размноженный элемент `circle`.
№	Код	Вид в браузере
5.11.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример pattern2.svg </desc> <pattern id="MyPattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"> <circle cx="11" cy="11" r="10" fill="red" stroke="black" /> </pattern> <rect x="2" y="2" width="146" height="146" fill="url(#MyPattern)" stroke="black" stroke-width ="2" /> </svg>
	Описание
	По сравнению с предыдущим примером, здесь увеличены значения атрибутов `width` и `height` в определении паттерна. Визуально шарики отстоят друг от друга на большее расстояние.
№	Код	Вид в браузере
5.11.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример pattern3.svg </desc> <pattern id="MyPattern" x="20" y="10" width="40" height="40" patternUnits="userSpaceOnUse"> <circle cx="11" cy="11" r="10" fill="red" stroke="black" /> </pattern> <rect x="2" y="2" width="146" height="146" fill="url(#MyPattern)" stroke="black" stroke-width ="2" /> </svg>
	Описание
	Смещение верхней точки заполнителя при изменении атрибутов `x` и `y` внутри паттерна.
№	Код	Вид в браузере
5.11.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример pattern4.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <pattern id="MyPattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse"> <rect x="1" y="1" width="20" height = "20" fill="url(#MyGradient)"/> </pattern> <ellipse cx="75" cy="75" rx="75" ry="50" fill="url(#MyPattern)" stroke="black" stroke-width ="2" /> </svg>
	Описание
	В качестве графического содержимого паттерна применяется элемент rect, заполненный градиентной заливкой.
№	Код	Вид в браузере
5.11.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример pattern5.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <pattern id="MyPattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse"> <rect x="1" y="1" width="20" height = "20" fill="url(#MyGradient)" /> </pattern> <ellipse cx="75" cy="75" rx="75" ry="50" fill="magenta" stroke="url(#MyPattern)" stroke-width ="10" /> </svg>
	Описание
	Применение элемента `pattern` в качестве контура фигуры.
№	Код	Вид в браузере
5.11.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример pattern6.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <pattern id="MyPattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse"> <rect x="1" y="1" width="20" height = "20" fill="url(#MyGradient)"/> </pattern> <text x="10" y="100" font-family="Arial Bold" font-size="90" stroke="black" stroke-width="1" fill="url(#MyPattern)"> Текст </text> </svg>
	Описание
	Заполнение паттерном текста.

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

Контуры

Оформление фигуры определяется не только ее заливкой, но и контуром. В первых лекциях мы определяли цвет заливки и ее толщину. Теперь рассмотрим другие атрибуты контура, доступные в SVG - графике. Описание всех атрибутов приводятся в табл. 5.12.

Атрибуты контура.
№	Название
5.12.1	`stroke`
	Описание
	Рисование контура фигуры
	Диапазон значений
	`<color>`
	Значение по умолчанию
	Фигура без контура.
№	Название
5.12.2	`stroke-width`
	Описание
	Толщина линии
	Диапазон значений
	`<length>`
	Значение по умолчанию
	1 пиксел
№	Название
5.12.3	`stroke-opacity`
	Описание
	Прозрачность заливки
	Диапазон значений
	Число между `0` (полная прозрачность) и `1` (полная непрозрачность)
	Значение по умолчанию
	`1`
№	Название
5.12.4	`stroke-dasharray`
	Описание
	Определение стиля линии - сплошная, пунктиром или точками.
	Диапазон значений
	`<number>`
	Значение по умолчанию
	Сплошная. В качестве значения допускается указание ряда чисел.
№	Название
5.12.5	`dashoffset`
	Описание
	Определение отступа при задании пунктирной линии
	Диапазон значений
	`<length>`
	Значение по умолчанию
	`0`
№	Название
5.12.6	`stroke-linecap`
	Описание
	Задание типа линии на концах - обычная (butt), скругленная (round) и с выступом (square).
	Диапазон значений
	`butt` \| `round` \| `square`
	Значение по умолчанию
	`butt`
№	Название
5.12.7	`sroke-linejoin`
	Описание
	Тип линии на изгибе - обычный ( `miter` ), сглаженный ( `round` ) и рубленый ( `bevel` ).
	Диапазон значений
	`mitre` \| `round` \| `bevel`
	Значение по умолчанию
	`mitre`
№	Название
5.12.8	`stroke-mitrelimit`
	Описание
	Величина отступа при выборе значении `miter` атрибута `stroke-linejoin`
	Диапазон значений
	`<number>`
	Значение по умолчанию
	`4`

В табл. 5.13 приводятся различные примеры использования атрибутов контура.

Атрибуты контура.
№	Код	Вид в браузере
5.13.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke1.svg </desc> <rect x="0" y="30" width="150" height="90" ></rect> <circle cx="75" cy="75" r="60" fill="blue" stroke="red" stroke-width="15" stroke-opacity="0.6"/> </svg>
	Описание
	Применение прозрачности к контуру. Заметно проведение контура по центральной части краев фигуры.
№	Код	Вид в браузере
5.13.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke2.svg </desc> <circle cx="75" cy="75" r="70" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5"/> </svg>
	Описание
	Атрибут `stroke-dasharray`, получение точечной линии.
№	Код	Вид в браузере
5.13.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke3.svg </desc> <circle cx="75" cy="75" r="70" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5,10"/> </svg>
	Описание
	Пара значений атрибута `stroke-dasharray` определяет размер точек и интервал между ними.
№	Код	Вид в браузере
5.13.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke4.svg </desc> <circle cx="75" cy="75" r="70" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5,10,15"/> </svg>
	Описание
	Получение пунктирной линии. Тройка значений атрибута `stroke-dasharray` определяет размер точек, интервал между ними и размер отрезков.
№	Код	Вид в браузере
5.13.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke5.svg </desc> <circle cx="75" cy="75" r="70" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5,10,15,5,10,15"/> </svg>
	Описание
	Повторяющиеся тройки значений приводят к тому же самому результату.
№	Код	Вид в браузере
5.13.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke6.svg </desc> <line x1="15" y1="0" x2="15" y2="100" stroke="black" stroke-width="1"/> <line x1="0" y1="10" x2="200" y2="10" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="0%"/> <line x1="0" y1="30" x2="200" y2="30" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="25%"/> <line x1="0" y1="50" x2="200" y2="50" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="50%"/> <line x1="0" y1="70" x2="200" y2="70" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="75%"/> <line x1="0" y1="90" x2="200" y2="90" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="100%"/> </svg>
	Описание
	Атрибут `stroke-dashoffset` позволяет задать начальный отступ пунктирной линии.
№	Код	Вид в браузере
5.13.7	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke7.svg </desc> <line x1="10" y1="25" x2="190" y2="25" stroke="black" stroke-width="10" stroke-linecap="butt"/> <line x1="10" y1="60" x2="190" y2="60" stroke="red" stroke-width="50"/> </svg>
	Описание
	Атрибут `stroke-linecap` со значением `butt`, совпадающим с принятым по умолчанию.
№	Код	Вид в браузере
5.13.8	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke8.svg </desc> <line x1="10" y1="25" x2="190" y2="25" stroke="black" stroke-width="10" stroke-linecap="round"/> <line x1="10" y1="60" x2="190" y2="60" stroke="red" stroke-width="50"/> </svg>
	Описание
	Атрибут `stroke-linecap` со значением `round`, задает сглаживание на концах. Заметно выступающее расположение линии - для обеих линий заданы одинаковые значения абсцисс.
№	Код	Вид в браузере
5.13.9	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke9.svg </desc> <line x1="10" y1="25" x2="190" y2="25" stroke="black" stroke-width="10" stroke-linecap="square"/> <line x1="10" y1="60" x2="190" y2="60" stroke="red" stroke-width="50"/> </svg>
	Описание
	Атрибут `stroke-linecap` со значением `square`, завершает линию обычным образом, но позволяет получить выступы по краям.
№	Код	Вид в браузере
5.13.10	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke10.svg </desc> <polyline points="20,80 50,20 80,80" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" /> </svg>
	Описание
	Атрибут `stroke-linejoin` со значением `miter`, принятым по умолчанию.
№	Код	Вид в браузере
5.13.11	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke11.svg </desc> <polyline points="20,80 50,20 80,80" stroke="red" stroke-width="15" fill="none" stroke-linejoin="round" /> </svg>
	Описание
	Атрибут `stroke-linejoin` со значением `round`, задающим сглаженный изгиб.
№	Код	Вид в браузере
5.13.12	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke12.svg </desc> <polyline points="20,80 50,20 80,80" stroke="red" stroke-width="15" fill="none" stroke-linejoin="bevel" /> </svg>
	Описание
	Атрибут `stroke-linejoin` со значением `bevel`, задающим рубленый изгиб.
№	Код	Вид в браузере
5.13.13	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke13.svg </desc> <line x1="70" y1="0" x2="70" y2="700" stroke="black" stroke-width="1"/> <line x1="95" y1="0" x2="95" y2="700" stroke="black" stroke-width="1"/> <polyline points="10,30 70,50 10,70" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="1" /> <polyline points="10,130 70,150 10,170" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="2" /> <polyline points="10,230 70,250 10,270" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="3" /> <polyline points="10,330 70,350 10,370" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="4" /> <polyline points="10,430 70,450 10,470" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="5" /> <polyline points="10,530 70,550 10,570" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="6" /> </svg>
	Описание
	В данном случае значения атрибута `stroke-miterlimit` до четырех задают рубленый изгиб, равные и больше четырех - обычный.

Маркеры

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

<defs>
  <marker id="myMarker" markerWidth="length" markerHeight="length"
          refX="coordinate" refY="coordinate" orient="auto">
  <!--Оформление маркера-->
</marker>
    </defs>
    <line x1="10" y1="10" x2="130" y2="10"  stroke="red" stroke-width="2"
          marker-end="url(#myMarker)"/>

Атрибут marker-end помещает в конец линии графический элемент, используемый в качестве оформления маркера. Описания атрибутов этого элемент приводятся в табл. 5.14.

Элемент marker.
№	Название
5.14.1	`markerWidth`, `markerHeight`
	Описание
	Ширина и высота фигуры, применяемой для оформления маркера.
	Диапазон значений
	`<length>`
	Значение по умолчанию
	`3`
№	Название
5.14.2	`refX`, `refY`
	Описание
	Координаты верхней левой точки фигуры.
	Диапазон значений
	`<coordinate>`
	Значение по умолчанию
	`0`
№	Название
5.14.3	`orient`
	Описание
	Поворот маркера вокруг центра.
	Диапазон значений
	`<angle>`
	Значение по умолчанию
	`0`
№	Название
5.14.4	`marker-start`, `marker-end`, `marker-mid`
	Описание
	Расположение маркера на линии - в начале, конце или середине.
	Диапазон значений
	-
	Значение по умолчанию
	-

Маркер, который был определен один раз, может применяться для многих линий в одном SVG - документе. В табл. 5.15 приводятся примеры использования этого элемента.

Элемент marker.
№	Код	Вид в браузере
5.15.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker1.svg </desc> <defs> <marker id="myMarker1" markerWidth="5" markerHeight="5" refX="0" refY="2.5" orient="auto"> <polygon points="0,0, 5,2.5 0,5" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="20" markerHeight="20" refX="0" refY="10" orient="auto"> <polygon points="0,0, 20,10 0,20" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="10" x2="130" y2="10" stroke="red" stroke-width="2" marker-end="url(#myMarker1)"/> <line x1="10" y1="50" x2="130" y2="50" stroke="red" stroke-width="2" marker-end="url(#myMarker2)"/> <line x1="10" y1="90" x2="130" y2="90" stroke="red" stroke-width="2" marker-end="url(#myMarker3)"/> </svg>
	Описание
	Несколько маркеров, различающихся лишь значениями атрибутов `markerWidth` и `markerHeight`.
№	Код	Вид в браузере
5.15.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker2.svg </desc> <defs> <marker id="myMarker1" markerWidth="10" markerHeight="10" refX="-5" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="15" x2="130" y2="15" stroke="red" stroke-width="2" marker-end="url(#myMarker1)"/> <line x1="10" y1="55" x2="130" y2="55" stroke="red" stroke-width="2" marker-end="url(#myMarker2)"/> <line x1="10" y1="95" x2="130" y2="95" stroke="red" stroke-width="2" marker-end="url(#myMarker3)"/> </svg>
	Описание
	Горизонтальное позиционирование маркера относительно линии при помощи атрибутов `refX` и `refY`.
№	Код	Вид в браузере
5.15.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker3.svg </desc> <defs> <marker id="myMarker1" markerWidth="10" markerHeight="10" refX="0" refY="0" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="10" markerHeight="10" refX="0" refY="10" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="15" x2="130" y2="15" stroke="red" stroke-width="2" marker-end="url(#myMarker1)"/> <line x1="10" y1="55" x2="130" y2="55" stroke="red" stroke-width="2" marker-end="url(#myMarker2)"/> <line x1="10" y1="95" x2="130" y2="95" stroke="red" stroke-width="2" marker-end="url(#myMarker3)"/> </svg>
	Описание
	Вертикальное позиционирование маркера относительно линии при помощи атрибутов `refX` и `refY`.
№	Код	Вид в браузере
5.15.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker4.svg </desc> <defs> <marker id="myMarker1" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="-20"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="20"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="15" x2="130" y2="15" stroke="red" stroke-width="2" marker-end="url(#myMarker1)"/> <line x1="10" y1="55" x2="130" y2="55" stroke="red" stroke-width="2" marker-end="url(#myMarker2)"/> <line x1="10" y1="95" x2="130" y2="95" stroke="red" stroke-width="2" marker-end="url(#myMarker3)"/> </svg>
	Описание
	Атрибут `orient` отвечает за поворот маркера.
№	Код	Вид в браузере
5.15.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker5.svg </desc> <defs> <marker id="myMarker1" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="15" x2="130" y2="15" stroke="red" stroke-width="2" marker-start="url(#myMarker1)"/> <line x1="10" y1="55" x2="130" y2="55" stroke="red" stroke-width="2" marker-end="url(#myMarker2)" /> <line x1="10" y1="95" x2="130" y2="95" stroke="red" stroke-width="2" marker-end="url(#myMarker3)" marker-start="url(#myMarker3)"/> </svg>
	Описание
	Размещение маркера относительно центра линии.
№	Код	Вид в браузере
5.15.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker6.svg </desc> <defs> <marker id="myMarker1" markerWidth="25" markerHeight="25" refX="-2230" refY="400" orient="auto" viewBox="0 0 1000 800"> <circle cx="500" cy="400" r="300" fill="lightskyblue" stroke="blue" stroke-width="30"/> <ellipse cx="500" cy="500" rx="150" ry="100" fill="none" stroke="blue" stroke-width="30"/> <rect x="300" y="370" width="400" height="130" fill="lightskyblue"/> <ellipse cx="350" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <ellipse cx="650" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <circle cx="350" cy="300" r="25" fill="black"/> <circle cx="650" cy="300" r="25" fill="black"/> </marker> <marker id="myMarker2" markerWidth="60" markerHeight="60" refX="100" refY="38" orient="auto" viewBox="0 0 200 100"> <polygon fill="red" points="100,10 105.8,27.2 123.8,27.2 109.4,38 114.6,55.2 100,45 85.4,55.2 90.6,38 76.2,27.2 94.2,27.2" /> </marker> <defs> <radialGradient id="MyGradient" fx="25%" fy="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <marker id="myMarker3" markerWidth="15" markerHeight="15" refX="37.5" refY="70" orient="auto" viewBox="0 0 150 150"> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </marker> </defs> <line x1="10" y1="20" x2="130" y2="30" stroke="red" stroke-width="2" marker-start="url(#myMarker1)"/> <line x1="10" y1="60" x2="130" y2="70" stroke="red" stroke-width="2" marker-end="url(#myMarker2)" /> <line x1="10" y1="100" x2="130" y2="110" stroke="red" stroke-width="2" marker-end="url(#myMarker3)" marker-start="url(#myMarker3)"/> </svg>
	Описание
	В качестве фигуры для оформления маркера может выступать группа простых элементов.

Элемент symbol

В Лекции 2 мы рассматривали объединении отдельных элементов в группы. Это очень удобный способ объединения фигур для задания координат, применения атрибутов и как мы увидим в следующих лекциях применения трансформаций. Но существует еще один способ объединения фигур, позволяющий создавать свои собственные элементы. Для них можно задавать цвет заливки, контура, размеры - словом поступать с ними так, как и в случае определения обычных элементов. Рассмотрим следующий фрагмент кода:

<defs>
  <symbol id="mySymbol" viewBox="0 0 100 100" 
     preserveAspectRatio="none">
    <path d="M 15,50 L 45, 50 M 30, 30 L 30, 75 M 30, 
       75 L 40, 90 M 30, 75 L 20, 90"></path>
    <circle cx="30" cy="30" r="10"/>
  </symbol>
</defs>
<use xlink:href="#mySymbol" x="0" y="10" width="100" 
  height="150" fill="pink" stroke="red" stroke-width="3"/>

Внутри секции defs помещается определение элемента symbol, содержащее окружность и элемент Path. Координаты этих элементов определяются в собственной системе - для этого вводится атрибут viewBox. Созданный символ используется в SVG - документе при помощи элемента use и атрибута xlink:href. Размеры символа можно менять без соблюдения пропорций - для этого в его определении включен атрибут preserveAspectRatio со значением none. В табл. 5.16 приводятся примеры использования символов.

Элемент symbol.
№	Код	Вид в браузере
5.16.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример symbol1.svg </desc> <defs> <symbol id="mySymbol" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M 15, 50 L 45, 50 M 30, 30 L 30, 75 M 30, 75 L 40, 90 M 30, 75 L 20, 90"> </path> <circle cx="30" cy="30" r="10"/> </symbol> </defs> <use xlink:href="#mySymbol" x="0" y="10" width="150" height="150"/> <use xlink:href="#mySymbol" x="50" y="10" width="300" height="150"/> <use xlink:href="#mySymbol" x="50" y="90" width="150" height="300"/> </svg>
	Описание
	Применение символа с заданием различных геометрических размеров. По умолчанию фигуры заливаются черным цветом с толщиной линий в 1 пиксел.
№	Код	Вид в браузере
5.16.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример symbol2.svg </desc> <defs> <symbol id="mySymbol" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M 15, 50 L 45, 50 M 30, 30 L 30, 75 M 30, 75 L 40, 90 M 30, 75 L 20, 90"> </path> <circle cx="30" cy="30" r="10"/> </symbol> </defs> <use xlink:href="#mySymbol" x="0" y="10" width="100" height="150" fill="pink" stroke="red" stroke-width="3"/> <use xlink:href="#mySymbol" x="50" y="80" width="70" height="70" fill="pink" stroke="red" stroke-width="2"/> <use xlink:href="#mySymbol" x="80" y="80" width="70" height="70" fill="lightblue" stroke="blue" stroke-width="2"/> <use xlink:href="#mySymbol" x="100" y="0" width="120" height="160" fill="lightblue" stroke="blue" stroke-width="3"/> </svg>
	Описание
	Применение символа с заданием геометрических размеров, а также заливки и контура.
№	Код	Вид в браузере
5.16.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример symbol3.svg </desc> <defs> <symbol id="mySymbol" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M 15, 50 L 45, 50 M 30, 30 L 30, 75 M 30, 75 L 40, 90 M 30, 75 L 20, 90"> </path> <circle cx="30" cy="30" r="10"/> </symbol> <symbol id="myFamily"> <use xlink:href="#mySymbol" x="0" y="10" width="100" height="150" fill="pink" stroke="red" stroke-width="3"/> <use xlink:href="#mySymbol" x="50" y="80" width="70" height="70" fill="pink" stroke="red" stroke-width="2"/> <use xlink:href="#mySymbol" x="80" y="80" width="70" height="70" fill="lightblue" stroke="blue" stroke-width="2"/> <use xlink:href="#mySymbol" x="100" y="0" width="120" height="160" fill="lightblue" stroke="blue" stroke-width="3"/> </symbol> </defs> <use xlink:href="#myFamily" x="0" y="0" width="150" height="150"/> <use xlink:href="#myFamily" x="0" y="120" width="150" height="150"/> <use xlink:href="#myFamily" x="0" y="240" width="150" height="150"/> </svg>
	Описание
	Применение вложенных символов.

Элемент clipPath

Элемент clipPath предназначен для отсекания заданной областью части изображения. Этот инструмент хорошо знаком пользователям графических программ, например в Adobe Photoshop для таких задач имеются специальные инструменты (рис. 5.5):

(рис 5.5) Инструмент горизонтальный текст-маска в программе Adobe Photoshop

Фрагмент кода для элемента clipPath выглядит так:

<defs>
  <!--Объект clipPath-->
  <clipPath id="myclipPath">
      <circle cx="150" cy="100" r="90">
      </circle>
  </clipPath>
</defs>
<image x="10" y="5" width="291" height="195"
      clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/>

Внутри элемента определяется фигура, которая будет ограничивать изображения. Элемент image предназначен для помещения в SVG - документ внешнего графического файла - в данном случае используется"sea2.jpg". В табл. 5.17 приводятся примеры использования элемента clipPath.

Элемент clipPath.
№	Код	Вид в браузере
5.17.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath1.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="150" cy="100" r="90"> </circle> </clipPath> </defs> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Отсекание части изображения окружностью.
№	Код	Вид в браузере
5.17.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath2.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <polygon points="20,10 280,10 20, 190 280,190" stroke="red" stroke-width="3" fill="lightpink"/> </clipPath> </defs> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Отсекание части изображения элементов `polygon`. (См. polygon3.svg)
№	Код	Вид в браузере
5.17.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath3.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="100" cy="100" r="90"></circle> <circle cx="200" cy="100" r="90"></circle> </clipPath> </defs> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	При наложении двух элементов, определяемых в `clipPath`, занимаемая ими площадь объединяется.
№	Код	Вид в браузере
5.17.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath4.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="100" cy="100" r="90"></circle> <circle cx="200" cy="100" r="90"></circle> </clipPath> </defs> <rect width="300" height="200" x="0" y="0" fill="black"> </rect> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Для оформления можно использовать дополнительные элементы.
№	Код	Вид в браузере
5.17.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath5.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="150" cy="100" r="90"> </circle> </clipPath> </defs> <rect width="300" height="200" x="0" y="0" fill="pink"> </rect> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> <circle cx="150" cy="100" r="90" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5"/> </svg>
	Описание
	Для последовательности элементов, среди которых имеется элемент image, справедлив тот же самый вертикальный порядок.
№	Код	Вид в браузере
5.17.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath6.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <text x="2" y="150" font-family="Arial" font-size="150"> АБВ </text> </clipPath> </defs> <image x="0" y="0" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Отсекание части изображения текстом.
№	Код	Вид в браузере
5.17.7	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath7.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <text x="2" y="150" font-family="Arial" font-size="150"> АБВ </text> </clipPath> </defs> <rect width="300" height="200" x="0" y="0" fill="yellow"> </rect> <image x="0" y="0" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> <text x="2" y="150" font-family="Arial" font-size="150" fill="none" stroke="orange" stroke-width="3"> АБВ </text> </svg>
	Описание
	Отсекание части изображения текстом с оформлением.

Элемент mask

При работе с clipPath можно было заметить, что внутреннее оформление фигуры, определяемой внутри элемента, игнорируется. Элемент mask является инструментом, поддерживающим все свойства элемента clipPath с учетом графической структуры заполнителя. Фрагмент кода для элемента mask выглядит так:

<defs>
  <mask id="myMask">
    <circle cx="150" cy="100" r="90" fill="url(#myGradient)">
    </circle>
  </mask>
</defs>
<image x="10" y="5" width="291" height="195"
       mask="url(#myMask)" xlink:href="sea2.jpg"/>

Здесь в качестве заливки фигуры-заполнителя используется радиальный градиент. В табл. 5.18 приводятся примеры использования элемента mask.


№	Код	Вид в браузере
5.18.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример mask1.svg </desc> <defs> <!--Градиент для заливки маски--> <radialGradient id="myGradient"> <stop offset="0%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </radialGradient> <!--Объект mask--> <mask id="myMask"> <circle cx="150" cy="100" r="90" fill="url(#myGradient)"> </circle> </mask> </defs> <image x="10" y="5" width="291" height="195" mask="url(#myMask)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Применение в качестве заполнителя маски окружности с градиентной заливкой.
№	Код	Вид в браузере
5.18.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример mask2.svg </desc> <defs> <!--Градиент для заливки маски--> <radialGradient id="myGradient"> <stop offset="80%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </radialGradient> <!--Объект mask--> <mask id="myMask"> <circle cx="150" cy="100" r="90" fill="url(#myGradient)"> </circle> </mask> </defs> <image x="10" y="5" width="291" height="195" mask="url(#myMask)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Применение в качестве заполнителя маски окружности с градиентной заливкой. Уменьшением размера градиентной области достигается увеличение площади открытой поверхности.
№	Код	Вид в браузере
5.18.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример mask3.svg </desc> <defs> <!--Градиент для заливки маски--> <radialGradient id="myGradient"> <stop offset="80%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </radialGradient> <!--Объект mask--> <mask id="myMask"> <circle cx="100" cy="100" r="90" fill="url(#myGradient)"> </circle> <circle cx="200" cy="100" r="90" fill="url(#myGradient)"> </circle> </mask> </defs> <image x="10" y="5" width="291" height="195" mask="url(#myMask)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Так же, как и в случае `clipPath`, при использовании нескольких фигур в качестве заполнителя их площади объединяются.
№	Код	Вид в браузере
5.18.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример noMask1.svg </desc> <defs> <!--Градиент для заливки маски--> <radialGradient id="myGradient"> <stop offset="80%" stop-color="blue" stop-opacity="0"/> <stop offset="100%" stop-color="blue" stop-opacity="1"/> </radialGradient> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="150" cy="100" r="90"> </circle> </clipPath> </defs> <rect width="300" height="200" x="0" y="0" fill="blue"></rect> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> <circle cx="150" cy="100" r="90" fill="url(#myGradient)"> </circle> </svg>
	Описание
	При использовании заполнителя, заполненного градиентом любого цвета, на рисунке заметно уменьшение прозрачности белого цвета. Для получения нужного цвета используется комбинация обычного элемента `clipPath` и наложения радиального градиента с падением прозрачности.
№	Код	Вид в браузере
5.18.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример mask4.svg </desc> <defs> <!--Градиент для заливки маски--> <linearGradient id="myGradient" x1="0%" y1="0%" x2="0%" y2="100%" > <stop offset="0%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </linearGradient> <!--Объект mask--> <mask id="myMask"> <rect x="0" y="0" width="300" height="200" fill="url(#myGradient)"/> </mask> </defs> <text x="2" y="150" font-family="Arial" font-size="150" fill="red" mask="url(#myMask)"> АБВ </text> </svg>
	Описание
	Маскированный текст.

Мы закончили рассмотрение основных возможностей рисования, связанных с простой графикой.

Страницы:

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

Заливка

Атрибуты заливки
№	Название
5.1.1	`fill`
	Описание
	Заливка цветом внутренней части фигуры или текста
	Диапазон значений
	Именованные названия, десятичный или шестнадцатеричный индекс цвета
	Значение по умолчанию
	Черный (black)
№	Название
5.1.2	`fill-opacity`
	Описание
	Прозрачность заливки
	Диапазон значений
	Число между `0` (полная прозрачность) и `1` (полная непрозрачность)
	Значение по умолчанию
	`1`
№	Название
5.1.3	`fill-rule`
	Описание
	Режим заливки фигуры, при которой остаются пустые (незакрашенные) области.
	Диапазон значений
	`nonzero \| evenodd` `nonzero` - полная заливка. `evenodd` - заливка с пустыми областями.
	Значение по умолчанию
	`nonzero`

Атрибуты fill, fill-opacity и fill-rule
№	Код	Вид в браузере
5.2.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="210" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill1.svg </desc> <rect x="0" y="25" width="210" height="50"></rect> <rect x="10" y="0" width="10" height="100" fill="red" fill-opacity="0.1"></rect> <rect x="30" y="0" width="10" height="100" fill="red" fill-opacity="0.2"></rect> <rect x="50" y="0" width="10" height="100" fill="red" fill-opacity="0.3"></rect> <rect x="70" y="0" width="10" height="100" fill="red" fill-opacity="0.4"></rect> <rect x="90" y="0" width="10" height="100" fill="red" fill-opacity="0.5"></rect> <rect x="110" y="0" width="10" height="100" fill="red" fill-opacity="0.6"></rect> <rect x="130" y="0" width="10" height="100" fill="red" fill-opacity="0.7"></rect> <rect x="150" y="0" width="10" height="100" fill="red" fill-opacity="0.8"></rect> <rect x="170" y="0" width="10" height="100" fill="red" fill-opacity="0.9"></rect> <rect x="190" y="0" width="10" height="100" fill="red" fill-opacity="1"></rect> </svg>
	Описание
	Полоски с различными значениями прозрачности.
№	Код	Вид в браузере
5.2.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="210" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill2.svg </desc> <rect x="0" y="25" width="210" height="50"></rect> <rect x="10" y="0" width="10" height="100" style="fill:red; fill-opacity:0.1"></rect> <rect x="30" y="0" width="10" height="100" style="fill:red; fill-opacity:0.2"></rect> <rect x="50" y="0" width="10" height="100" style="fill:red; fill-opacity:0.3"></rect> <rect x="70" y="0" width="10" height="100" style="fill:red; fill-opacity:0.4"></rect> <rect x="90" y="0" width="10" height="100" style="fill:red; fill-opacity:0.5"></rect> <rect x="110" y="0" width="10" height="100" style="fill:red; fill-opacity:0.6"></rect> <rect x="130" y="0" width="10" height="100" style="fill:red; fill-opacity:0.7"></rect> <rect x="150" y="0" width="10" height="100" style="fill:red; fill-opacity:0.8"></rect> <rect x="170" y="0" width="10" height="100" style="fill:red; fill-opacity:0.9"></rect> <rect x="190" y="0" width="10" height="100" style="fill:red; fill-opacity:1"></rect> </svg>
	Описание
	Полоски с различными значениями прозрачности, оформление при помощи атрибута style.
№	Код	Вид в браузере
5.2.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="210" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill3.svg </desc> <rect x="0" y="25" width="210" height="50" ></rect> <g style="fill:red; fill-opacity:0.6"> <rect x="10" y="0" width="10" height="100"></rect> <rect x="30" y="0" width="10" height="100"></rect> <rect x="50" y="0" width="10" height="100"></rect> <rect x="70" y="0" width="10" height="100"></rect> <rect x="90" y="0" width="10" height="100"></rect> <rect x="110" y="0" width="10" height="100"></rect> <rect x="130" y="0" width="10" height="100"></rect> <rect x="150" y="0" width="10" height="100"></rect> <rect x="170" y="0" width="10" height="100"></rect> <rect x="190" y="0" width="10" height="100"></rect> </g> </svg>
	Описание
	Задание единой прозрачности для группы элементов.
№	Код	Вид в браузере
5.2.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill4.svg </desc> <polygon fill-rule="nonzero" fill="red" stroke="black" points="50,6 18,86 98,38 2,38 82,86"/> <polygon fill-rule="evenodd" fill="red" stroke="black" points="151,6 119,86 199,38 103,38 183,86"/> </svg>
	Описание
	Режимы заливки - полная и с пустыми областями.
№	Код	Вид в браузере
5.2.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill5.svg </desc> <polygon style="fill-rule: nonzero; fill: red; stroke: black;" points="50,6 18,86 98,38 2,38 82,86"/> <polygon style="fill-rule: evenodd; fill: red; stroke: black;" points="151,6 119,86 199,38 103,38 183,86" /> </svg>
	Описание
	Режимы заливки - полная и с пустыми областями, оформление при помощи атрибута `style`.
№	Код	Вид в браузере
5.2.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример fill6.svg </desc> <!--Фоновый черный прямоугольник--> <rect x="0" y="25" width="250" height="250" ></rect> <!--Непрозрачный текст--> <g font-family="Arial" font-size="40" stroke="white" stroke-width="1"> <text x="10" y="100" fill="red"> Red </text> <text x="10" y="150" fill="yellow"> Yellow </text> <text x="10" y="200" fill="green"> Green </text> </g> <!--Полупрозрачный текст--> <g style="fill:red; fill-opacity:0.6"> <g font-family="Arial" font-size="40" stroke="white" stroke-width="1"> <text x="135" y="100" fill="red"> Red </text> <text x="135" y="150" fill="yellow"> Yellow </text> <text x="135" y="200" fill="green"> Green </text> </g> </g> </svg>
	Описание
	Полностью непрозрачный и частично прозрачный текст на черном фоне. Для оформления текста используются группы.

Линейная градиентная заливка

<defs>
  <linearGradient id="MyGradient">
    <stop offset="30%" stop-color="red"/>
    <stop offset="70%" stop-color="yellow"/>
  </linearGradient>
</defs>
<rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/>

(рис 5.1) Определение linearGradient

Элемент linearGradient, атрибут offset.
№	Код	Вид в браузере
5.3.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientoffset1.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Атрибуты `offset` с первыми предельными граничными значениями - 0 и 100%.
№	Код	Вид в браузере
5.3.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientoffset2.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="20%" stop-color="red"/> <stop offset="80%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со значениями - 20 и 80%. Хорошо заметны области чистых цветов.
№	Код	Вид в браузере
5.3.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientoffset3.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="30%" stop-color="red"/> <stop offset="70%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со значениями - 30 и 70%.
№	Код	Вид в браузере
5.3.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientoffset4.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="50%" stop-color="red"/> <stop offset="50%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Атрибуты `offset` со вторыми предельными граничными значениями - 50 и 50%. В этом случае градиент вырождается в две области с чистыми цветами.

<defs>
  <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="100%" >
    <stop offset="0%" stop-color="red"/>
    <stop offset="100%" stop-color="yellow"/>
  </linearGradient>
</defs>
<rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" />

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

(рис 5.2) Направление градиента

Элемент linearGradient, направление градиента
№	Код	Вид в браузере
5.4.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection1.svg </desc> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="100%" > <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Направление градиента из верхнего левого в правый нижний угол.
№	Код	Вид в браузере
5.4.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection2.svg </desc> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%" > <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Обычное направление градиента, с которым мы уже сталкивались ранее (см. linearGradientoffset1.svg) по умолчанию совпадает с указанными значениями набора атрибутов.
№	Код	Вид в браузере
5.4.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection3.svg </desc> <defs> <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Направление градиента сверху вниз.
№	Код	Вид в браузере
5.4.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection4.svg </desc> <defs> <linearGradient id="MyGradient" x1="100%" y1="0%" x2="0%" y2="0%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Направление градиента слева направо. В принципе, такое же расположение можно получить, если поменять местами цвета градиента.
№	Код	Вид в браузере
5.4.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientDirection5.svg </desc> <defs> <linearGradient id="MyGradient" x1="0%" y1="100%" x2="0%" y2="0%" > <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Направление градиента снизу вверх.

Для других, промежуточных значений, можно изменять значения атрибутов в диапазоне от 0 до 100%.

Внутри определения градиента можно помещать несколько цветов:

<defs>
  <linearGradient id="MyGradient">
    <stop offset="0%" stop-color="blue"/>
    <stop offset="20%" stop-color="red"/>
    <stop offset="30%" stop-color="orange"/>
    <stop offset="40%" stop-color="yellow"/>
    <stop offset="50%" stop-color="green"/>
    <stop offset="60%" stop-color="deepskyblue"/>
    <stop offset="70%" stop-color="blue"/>
    <stop offset="80%" stop-color="purple"/>
    <stop offset="100%" stop-color="white"/>
  </linearGradient>
</defs>
<rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/>

Элемент linearGradient, серия цветов, атрибут stop-opacity.
№	Код	Вид в браузере
5.5.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример linearGradientSome1.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Градиент содержащий серию цветов.
№	Код	Вид в браузере
5.5.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример linearGradientSome2.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <circle cx="75" cy="75" r="75" fill="url(#MyGradient)"/> </svg>
	Описание
	Применение градиента к окружности.
№	Код	Вид в браузере
5.5.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример linearGradientSome3.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <rect x="10" y ="5" width="130" height="90" fill="url(#MyGradient)"/> <circle cx="35" cy="120" r="25" fill="url(#MyGradient)" /> <circle cx="115" cy="120" r="25" fill="url(#MyGradient)" /> </svg>
	Описание
	Применение градиента к нескольким фигурам. Распределение цветов масштабируется в зависимости от размеров фигуры.
№	Код	Вид в браузере
5.5.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример linearGradientSome4.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <text x="10" y="100" font-family="Arial Bold" font-size="90" stroke="black" stroke-width="1" fill="url(#MyGradient)"> Текст </text> </svg>
	Описание
	Заливка градиентом текста.
№	Код	Вид в браузере
5.5.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример linearGradientSome5.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </linearGradient> </defs> <rect x="0" y="10" width="150" height="130"></rect> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибут `stop-opacity` позволяет задавать прозрачность цвета градиента.

Радиальная градиентная заливка

<defs>
  <radialGradient id="MyGradient">
    <stop offset="0%" stop-color="red"/>
    <stop offset="100%" stop-color="yellow"/>
  </radialGradient>
</defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)" />

(рис 5.3) Определение radialGradient

Элемент radialGradient, атрибут offset.
№	Код	Вид в браузере
5.6.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset1.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` с первыми предельными граничными значениями - 0 и 100%.
№	Код	Вид в браузере
5.6.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset2.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="0%" stop-color="yellow"/> <stop offset="100%" stop-color="red"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` с первыми предельными граничными значениями - 0 и 100%. Цвета градиента поменяли местами.
№	Код	Вид в браузере
5.6.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset3.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="20%" stop-color="red"/> <stop offset="80%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со значениями - 20 и 80%. Как и в случае линейного градиента хорошо заметны области чистых цветов.
№	Код	Вид в браузере
5.6.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset4.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="30%" stop-color="red"/> <stop offset="70%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со значениями - 30 и 70%.
№	Код	Вид в браузере
5.6.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientoffset5.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="50%" stop-color="red"/> <stop offset="50%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Атрибуты `offset` со вторыми предельными граничными значениями - 50 и 50%. В этом случае градиент вырождается в две радиальные области с чистыми цветами.

<defs>
  <radialGradient id="MyGradient"  
                  cx="50%" cy="50%" r="25%">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="yellow"/>
  </radialGradient>
</defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/>

В этом случае область градиента будет локализована в центре фигуры в окружности с радиусом 25% (рис. 5.4)

(рис 5.4) Локализация радиального градиента

Элемент radialGradient, атрибуты cx, cy и r.
№	Код	Вид в браузере
5.7.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize1.svg </desc> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Значения атрибутов совпадают с принятыми по умолчанию (см. radialGradientoffset1.svg)
№	Код	Вид в браузере
5.7.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize2.svg </desc> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="25%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Градиент локализован в окружности с радиусом 25%
№	Код	Вид в браузере
5.7.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize3.svg </desc> <defs> <radialGradient id="MyGradient1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> <radialGradient id="MyGradient2" cx="50%" cy="50%" r="25%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <rect height="150" width="150" x="0" y="0" fill="url(#MyGradient1)"/> <rect height="150" width="150" x="0" y="150" fill="url(#MyGradient2)"/> <!--Вспомогательная линия--> <line x1="0" y1="150" x2="150" y2="150" stroke="red" stroke-width="2"/> </svg>
	Описание
	Заливка прямоугольника радиальным градиентом без атрибутов (наверху) и с атрибутами (внизу).
№	Код	Вид в браузере
5.7.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize4.svg </desc> <defs> <radialGradient id="MyGradient" cx="50%" cy="50%" r="75%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/> </svg>
	Описание
	Увеличение площади распространения градиента позволяет выделить его определенную часть.
№	Код	Вид в браузере
5.7.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize5.svg </desc> <defs> <radialGradient id="MyGradient" cx="25%" cy="25%" r="25%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/> </svg>
	Описание
	Отсекание фигурой изображение градиента, локализованного в верхней левой части.
№	Код	Вид в браузере
5.7.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientLocalize6.svg </desc> <defs> <radialGradient id="MyGradient" cx="75%" cy="75%" r="25%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="yellow"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/> </svg>
	Описание
	Отсекание фигурой изображение градиента, локализованного в правой нижней части.

Элемент radialGradient, атрибуты fx и fy.
№	Код	Вид в браузере
5.8.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientF1.svg </desc> <defs> <radialGradient id="MyGradient" fx="25%" fy="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Эффект светового блика в левой верхней части фигуры.
№	Код	Вид в браузере
5.8.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример radialGradientF2.svg </desc> <defs> <radialGradient id="MyGradient" fx="75%" fy="75%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Эффект светового блика в правой нижней части фигуры.

Элемент radialGradient, серия цветов, атрибут stop-opacity.
№	Код	Вид в браузере
5.9.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome1.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="10%" stop-color="white"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </radialGradient> </defs> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Заливка окружности радиальным градиентом, содержащим серию цветов.
№	Код	Вид в браузере
5.9.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome2.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="10%" stop-color="white"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </radialGradient> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/> </svg>
	Описание
	Заливка прямоугольника радиальным градиентом, содержащим серию цветов.
№	Код	Вид в браузере
5.9.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome3.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="10%" stop-color="white"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </radialGradient> </defs> <rect x="10" y ="5" width="130" height="90" fill="url(#MyGradient)"/> <circle cx="35" cy="120" r="25" fill="url(#MyGradient)"/> <circle cx="115" cy="120" r="25" fill="url(#MyGradient)"/> </svg>
	Описание
	Заливка нескольких фигур радиальным градиентом, содержащим серию цветов.
№	Код	Вид в браузере
5.9.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome4.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="10%" stop-color="white"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </radialGradient> </defs> <text x="10" y="100" font-family="Arial Bold" font-size="90" stroke="black" stroke-width="1" fill="url(#MyGradient)"> Текст </text> </svg>
	Описание
	Заливка текста радиальным градиентом.
№	Код	Вид в браузере
5.9.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome5.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </radialGradient> </defs> <rect x="0" y="60" width="150" height="30" ></rect> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </svg>
	Описание
	Радиальный градиент с нулевой прозрачностью по краям.
№	Код	Вид в браузере
5.9.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример radialGradientSome6.svg </desc> <defs> <radialGradient id="MyGradient"> <stop offset="0%" stop-color="white" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <rect x="0" y="60" width="150" height="30"></rect> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/> </svg>
	Описание
	Радиальный градиент с нулевой прозрачностью в центре.

Паттерны

<pattern id="MyPattern" x="coordinate" y="coordinate" 
  width="length" height="length"
         patternUnits="userSpaceOnUse | objectBoundingBox" >
  <!-Графическое содержимое-->
</pattern>


№	Название
5.10.1	`x`, `y`
	Описание
	Координаты верхнего левого угла графического элемента, который служит мозаикой в паттерне.
№	Название
5.10.2	`width`, `height`
	Описание
	Ширина и высота площади, которую занимает отдельный элемент мозаики. Визуально этот параметр определяет разреженность или уплотненность паттерна.
№	Название
5.10.3	`patternUnits`
	Описание
	Определение координатной системы для атрибутов `x`, `y`, `width` и `height`. Возможны следующие значения: `userSpaceOnUse` - атрибуты `x`, `y`, `width` и `height` определяются в системе координат той фигуры, для которой будет применяться паттерн. `objectBoundingBox` - атрибуты `x`, `y`, `width` и `height` определяются в системе координат самого паттерна. Если параметр `patternUnits` не указан, то по умолчанию принимается значение `objectBoundingBox`.

В табл. 5.11 приводятся примеры использования паттернов.

Элемент pattern.
№	Код	Вид в браузере
5.11.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример pattern1.svg </desc> <pattern id="MyPattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse"> <circle cx="11" cy="11" r="10" fill="red" stroke="black"/> </pattern> <rect x="2" y="2" width="146" height="146" fill="url(#MyPattern)" stroke="black" stroke-width ="2"/> </svg>
	Описание
	Графическое содержимое паттерна представляет собой размноженный элемент `circle`.
№	Код	Вид в браузере
5.11.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример pattern2.svg </desc> <pattern id="MyPattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"> <circle cx="11" cy="11" r="10" fill="red" stroke="black" /> </pattern> <rect x="2" y="2" width="146" height="146" fill="url(#MyPattern)" stroke="black" stroke-width ="2" /> </svg>
	Описание
	По сравнению с предыдущим примером, здесь увеличены значения атрибутов `width` и `height` в определении паттерна. Визуально шарики отстоят друг от друга на большее расстояние.
№	Код	Вид в браузере
5.11.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример pattern3.svg </desc> <pattern id="MyPattern" x="20" y="10" width="40" height="40" patternUnits="userSpaceOnUse"> <circle cx="11" cy="11" r="10" fill="red" stroke="black" /> </pattern> <rect x="2" y="2" width="146" height="146" fill="url(#MyPattern)" stroke="black" stroke-width ="2" /> </svg>
	Описание
	Смещение верхней точки заполнителя при изменении атрибутов `x` и `y` внутри паттерна.
№	Код	Вид в браузере
5.11.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример pattern4.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <pattern id="MyPattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse"> <rect x="1" y="1" width="20" height = "20" fill="url(#MyGradient)"/> </pattern> <ellipse cx="75" cy="75" rx="75" ry="50" fill="url(#MyPattern)" stroke="black" stroke-width ="2" /> </svg>
	Описание
	В качестве графического содержимого паттерна применяется элемент rect, заполненный градиентной заливкой.
№	Код	Вид в браузере
5.11.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример pattern5.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <pattern id="MyPattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse"> <rect x="1" y="1" width="20" height = "20" fill="url(#MyGradient)" /> </pattern> <ellipse cx="75" cy="75" rx="75" ry="50" fill="magenta" stroke="url(#MyPattern)" stroke-width ="10" /> </svg>
	Описание
	Применение элемента `pattern` в качестве контура фигуры.
№	Код	Вид в браузере
5.11.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="250" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример pattern6.svg </desc> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="blue"/> <stop offset="20%" stop-color="red"/> <stop offset="30%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="50%" stop-color="green"/> <stop offset="60%" stop-color="deepskyblue"/> <stop offset="70%" stop-color="blue"/> <stop offset="80%" stop-color="purple"/> <stop offset="100%" stop-color="white"/> </linearGradient> </defs> <pattern id="MyPattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse"> <rect x="1" y="1" width="20" height = "20" fill="url(#MyGradient)"/> </pattern> <text x="10" y="100" font-family="Arial Bold" font-size="90" stroke="black" stroke-width="1" fill="url(#MyPattern)"> Текст </text> </svg>
	Описание
	Заполнение паттерном текста.

Контуры

Атрибуты контура.
№	Название
5.12.1	`stroke`
	Описание
	Рисование контура фигуры
	Диапазон значений
	`<color>`
	Значение по умолчанию
	Фигура без контура.
№	Название
5.12.2	`stroke-width`
	Описание
	Толщина линии
	Диапазон значений
	`<length>`
	Значение по умолчанию
	1 пиксел
№	Название
5.12.3	`stroke-opacity`
	Описание
	Прозрачность заливки
	Диапазон значений
	Число между `0` (полная прозрачность) и `1` (полная непрозрачность)
	Значение по умолчанию
	`1`
№	Название
5.12.4	`stroke-dasharray`
	Описание
	Определение стиля линии - сплошная, пунктиром или точками.
	Диапазон значений
	`<number>`
	Значение по умолчанию
	Сплошная. В качестве значения допускается указание ряда чисел.
№	Название
5.12.5	`dashoffset`
	Описание
	Определение отступа при задании пунктирной линии
	Диапазон значений
	`<length>`
	Значение по умолчанию
	`0`
№	Название
5.12.6	`stroke-linecap`
	Описание
	Задание типа линии на концах - обычная (butt), скругленная (round) и с выступом (square).
	Диапазон значений
	`butt` \| `round` \| `square`
	Значение по умолчанию
	`butt`
№	Название
5.12.7	`sroke-linejoin`
	Описание
	Тип линии на изгибе - обычный ( `miter` ), сглаженный ( `round` ) и рубленый ( `bevel` ).
	Диапазон значений
	`mitre` \| `round` \| `bevel`
	Значение по умолчанию
	`mitre`
№	Название
5.12.8	`stroke-mitrelimit`
	Описание
	Величина отступа при выборе значении `miter` атрибута `stroke-linejoin`
	Диапазон значений
	`<number>`
	Значение по умолчанию
	`4`

В табл. 5.13 приводятся различные примеры использования атрибутов контура.

Атрибуты контура.
№	Код	Вид в браузере
5.13.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke1.svg </desc> <rect x="0" y="30" width="150" height="90" ></rect> <circle cx="75" cy="75" r="60" fill="blue" stroke="red" stroke-width="15" stroke-opacity="0.6"/> </svg>
	Описание
	Применение прозрачности к контуру. Заметно проведение контура по центральной части краев фигуры.
№	Код	Вид в браузере
5.13.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke2.svg </desc> <circle cx="75" cy="75" r="70" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5"/> </svg>
	Описание
	Атрибут `stroke-dasharray`, получение точечной линии.
№	Код	Вид в браузере
5.13.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke3.svg </desc> <circle cx="75" cy="75" r="70" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5,10"/> </svg>
	Описание
	Пара значений атрибута `stroke-dasharray` определяет размер точек и интервал между ними.
№	Код	Вид в браузере
5.13.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke4.svg </desc> <circle cx="75" cy="75" r="70" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5,10,15"/> </svg>
	Описание
	Получение пунктирной линии. Тройка значений атрибута `stroke-dasharray` определяет размер точек, интервал между ними и размер отрезков.
№	Код	Вид в браузере
5.13.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke5.svg </desc> <circle cx="75" cy="75" r="70" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5,10,15,5,10,15"/> </svg>
	Описание
	Повторяющиеся тройки значений приводят к тому же самому результату.
№	Код	Вид в браузере
5.13.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke6.svg </desc> <line x1="15" y1="0" x2="15" y2="100" stroke="black" stroke-width="1"/> <line x1="0" y1="10" x2="200" y2="10" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="0%"/> <line x1="0" y1="30" x2="200" y2="30" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="25%"/> <line x1="0" y1="50" x2="200" y2="50" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="50%"/> <line x1="0" y1="70" x2="200" y2="70" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="75%"/> <line x1="0" y1="90" x2="200" y2="90" stroke="red" stroke-width="5" stroke-dasharray="5,10,15" stroke-dashoffset="100%"/> </svg>
	Описание
	Атрибут `stroke-dashoffset` позволяет задать начальный отступ пунктирной линии.
№	Код	Вид в браузере
5.13.7	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke7.svg </desc> <line x1="10" y1="25" x2="190" y2="25" stroke="black" stroke-width="10" stroke-linecap="butt"/> <line x1="10" y1="60" x2="190" y2="60" stroke="red" stroke-width="50"/> </svg>
	Описание
	Атрибут `stroke-linecap` со значением `butt`, совпадающим с принятым по умолчанию.
№	Код	Вид в браузере
5.13.8	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke8.svg </desc> <line x1="10" y1="25" x2="190" y2="25" stroke="black" stroke-width="10" stroke-linecap="round"/> <line x1="10" y1="60" x2="190" y2="60" stroke="red" stroke-width="50"/> </svg>
	Описание
	Атрибут `stroke-linecap` со значением `round`, задает сглаживание на концах. Заметно выступающее расположение линии - для обеих линий заданы одинаковые значения абсцисс.
№	Код	Вид в браузере
5.13.9	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke9.svg </desc> <line x1="10" y1="25" x2="190" y2="25" stroke="black" stroke-width="10" stroke-linecap="square"/> <line x1="10" y1="60" x2="190" y2="60" stroke="red" stroke-width="50"/> </svg>
	Описание
	Атрибут `stroke-linecap` со значением `square`, завершает линию обычным образом, но позволяет получить выступы по краям.
№	Код	Вид в браузере
5.13.10	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke10.svg </desc> <polyline points="20,80 50,20 80,80" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" /> </svg>
	Описание
	Атрибут `stroke-linejoin` со значением `miter`, принятым по умолчанию.
№	Код	Вид в браузере
5.13.11	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke11.svg </desc> <polyline points="20,80 50,20 80,80" stroke="red" stroke-width="15" fill="none" stroke-linejoin="round" /> </svg>
	Описание
	Атрибут `stroke-linejoin` со значением `round`, задающим сглаженный изгиб.
№	Код	Вид в браузере
5.13.12	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke12.svg </desc> <polyline points="20,80 50,20 80,80" stroke="red" stroke-width="15" fill="none" stroke-linejoin="bevel" /> </svg>
	Описание
	Атрибут `stroke-linejoin` со значением `bevel`, задающим рубленый изгиб.
№	Код	Вид в браузере
5.13.13	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример stroke13.svg </desc> <line x1="70" y1="0" x2="70" y2="700" stroke="black" stroke-width="1"/> <line x1="95" y1="0" x2="95" y2="700" stroke="black" stroke-width="1"/> <polyline points="10,30 70,50 10,70" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="1" /> <polyline points="10,130 70,150 10,170" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="2" /> <polyline points="10,230 70,250 10,270" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="3" /> <polyline points="10,330 70,350 10,370" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="4" /> <polyline points="10,430 70,450 10,470" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="5" /> <polyline points="10,530 70,550 10,570" stroke="red" stroke-width="15" fill="none" stroke-linejoin="miter" stroke-miterlimit ="6" /> </svg>
	Описание
	В данном случае значения атрибута `stroke-miterlimit` до четырех задают рубленый изгиб, равные и больше четырех - обычный.

Маркеры

<defs>
  <marker id="myMarker" markerWidth="length" markerHeight="length"
          refX="coordinate" refY="coordinate" orient="auto">
  <!--Оформление маркера-->
</marker>
    </defs>
    <line x1="10" y1="10" x2="130" y2="10"  stroke="red" stroke-width="2"
          marker-end="url(#myMarker)"/>

Элемент marker.
№	Название
5.14.1	`markerWidth`, `markerHeight`
	Описание
	Ширина и высота фигуры, применяемой для оформления маркера.
	Диапазон значений
	`<length>`
	Значение по умолчанию
	`3`
№	Название
5.14.2	`refX`, `refY`
	Описание
	Координаты верхней левой точки фигуры.
	Диапазон значений
	`<coordinate>`
	Значение по умолчанию
	`0`
№	Название
5.14.3	`orient`
	Описание
	Поворот маркера вокруг центра.
	Диапазон значений
	`<angle>`
	Значение по умолчанию
	`0`
№	Название
5.14.4	`marker-start`, `marker-end`, `marker-mid`
	Описание
	Расположение маркера на линии - в начале, конце или середине.
	Диапазон значений
	-
	Значение по умолчанию
	-

Элемент marker.
№	Код	Вид в браузере
5.15.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker1.svg </desc> <defs> <marker id="myMarker1" markerWidth="5" markerHeight="5" refX="0" refY="2.5" orient="auto"> <polygon points="0,0, 5,2.5 0,5" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="20" markerHeight="20" refX="0" refY="10" orient="auto"> <polygon points="0,0, 20,10 0,20" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="10" x2="130" y2="10" stroke="red" stroke-width="2" marker-end="url(#myMarker1)"/> <line x1="10" y1="50" x2="130" y2="50" stroke="red" stroke-width="2" marker-end="url(#myMarker2)"/> <line x1="10" y1="90" x2="130" y2="90" stroke="red" stroke-width="2" marker-end="url(#myMarker3)"/> </svg>
	Описание
	Несколько маркеров, различающихся лишь значениями атрибутов `markerWidth` и `markerHeight`.
№	Код	Вид в браузере
5.15.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker2.svg </desc> <defs> <marker id="myMarker1" markerWidth="10" markerHeight="10" refX="-5" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="15" x2="130" y2="15" stroke="red" stroke-width="2" marker-end="url(#myMarker1)"/> <line x1="10" y1="55" x2="130" y2="55" stroke="red" stroke-width="2" marker-end="url(#myMarker2)"/> <line x1="10" y1="95" x2="130" y2="95" stroke="red" stroke-width="2" marker-end="url(#myMarker3)"/> </svg>
	Описание
	Горизонтальное позиционирование маркера относительно линии при помощи атрибутов `refX` и `refY`.
№	Код	Вид в браузере
5.15.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker3.svg </desc> <defs> <marker id="myMarker1" markerWidth="10" markerHeight="10" refX="0" refY="0" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="10" markerHeight="10" refX="0" refY="10" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="15" x2="130" y2="15" stroke="red" stroke-width="2" marker-end="url(#myMarker1)"/> <line x1="10" y1="55" x2="130" y2="55" stroke="red" stroke-width="2" marker-end="url(#myMarker2)"/> <line x1="10" y1="95" x2="130" y2="95" stroke="red" stroke-width="2" marker-end="url(#myMarker3)"/> </svg>
	Описание
	Вертикальное позиционирование маркера относительно линии при помощи атрибутов `refX` и `refY`.
№	Код	Вид в браузере
5.15.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker4.svg </desc> <defs> <marker id="myMarker1" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="-20"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="20"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="15" x2="130" y2="15" stroke="red" stroke-width="2" marker-end="url(#myMarker1)"/> <line x1="10" y1="55" x2="130" y2="55" stroke="red" stroke-width="2" marker-end="url(#myMarker2)"/> <line x1="10" y1="95" x2="130" y2="95" stroke="red" stroke-width="2" marker-end="url(#myMarker3)"/> </svg>
	Описание
	Атрибут `orient` отвечает за поворот маркера.
№	Код	Вид в браузере
5.15.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker5.svg </desc> <defs> <marker id="myMarker1" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker2" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> <marker id="myMarker3" markerWidth="10" markerHeight="10" refX="0" refY="5" orient="auto"> <polygon points="0,0, 10,5 0,10" fill="none" stroke="blue" stroke-width="1"/> </marker> </defs> <line x1="10" y1="15" x2="130" y2="15" stroke="red" stroke-width="2" marker-start="url(#myMarker1)"/> <line x1="10" y1="55" x2="130" y2="55" stroke="red" stroke-width="2" marker-end="url(#myMarker2)" /> <line x1="10" y1="95" x2="130" y2="95" stroke="red" stroke-width="2" marker-end="url(#myMarker3)" marker-start="url(#myMarker3)"/> </svg>
	Описание
	Размещение маркера относительно центра линии.
№	Код	Вид в браузере
5.15.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="180" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример marker6.svg </desc> <defs> <marker id="myMarker1" markerWidth="25" markerHeight="25" refX="-2230" refY="400" orient="auto" viewBox="0 0 1000 800"> <circle cx="500" cy="400" r="300" fill="lightskyblue" stroke="blue" stroke-width="30"/> <ellipse cx="500" cy="500" rx="150" ry="100" fill="none" stroke="blue" stroke-width="30"/> <rect x="300" y="370" width="400" height="130" fill="lightskyblue"/> <ellipse cx="350" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <ellipse cx="650" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <circle cx="350" cy="300" r="25" fill="black"/> <circle cx="650" cy="300" r="25" fill="black"/> </marker> <marker id="myMarker2" markerWidth="60" markerHeight="60" refX="100" refY="38" orient="auto" viewBox="0 0 200 100"> <polygon fill="red" points="100,10 105.8,27.2 123.8,27.2 109.4,38 114.6,55.2 100,45 85.4,55.2 90.6,38 76.2,27.2 94.2,27.2" /> </marker> <defs> <radialGradient id="MyGradient" fx="25%" fy="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <marker id="myMarker3" markerWidth="15" markerHeight="15" refX="37.5" refY="70" orient="auto" viewBox="0 0 150 150"> <circle cx="75" cy="75" r="70" fill="url(#MyGradient)" /> </marker> </defs> <line x1="10" y1="20" x2="130" y2="30" stroke="red" stroke-width="2" marker-start="url(#myMarker1)"/> <line x1="10" y1="60" x2="130" y2="70" stroke="red" stroke-width="2" marker-end="url(#myMarker2)" /> <line x1="10" y1="100" x2="130" y2="110" stroke="red" stroke-width="2" marker-end="url(#myMarker3)" marker-start="url(#myMarker3)"/> </svg>
	Описание
	В качестве фигуры для оформления маркера может выступать группа простых элементов.

Элемент symbol

<defs>
  <symbol id="mySymbol" viewBox="0 0 100 100" 
     preserveAspectRatio="none">
    <path d="M 15,50 L 45, 50 M 30, 30 L 30, 75 M 30, 
       75 L 40, 90 M 30, 75 L 20, 90"></path>
    <circle cx="30" cy="30" r="10"/>
  </symbol>
</defs>
<use xlink:href="#mySymbol" x="0" y="10" width="100" 
  height="150" fill="pink" stroke="red" stroke-width="3"/>

Элемент symbol.
№	Код	Вид в браузере
5.16.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример symbol1.svg </desc> <defs> <symbol id="mySymbol" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M 15, 50 L 45, 50 M 30, 30 L 30, 75 M 30, 75 L 40, 90 M 30, 75 L 20, 90"> </path> <circle cx="30" cy="30" r="10"/> </symbol> </defs> <use xlink:href="#mySymbol" x="0" y="10" width="150" height="150"/> <use xlink:href="#mySymbol" x="50" y="10" width="300" height="150"/> <use xlink:href="#mySymbol" x="50" y="90" width="150" height="300"/> </svg>
	Описание
	Применение символа с заданием различных геометрических размеров. По умолчанию фигуры заливаются черным цветом с толщиной линий в 1 пиксел.
№	Код	Вид в браузере
5.16.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример symbol2.svg </desc> <defs> <symbol id="mySymbol" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M 15, 50 L 45, 50 M 30, 30 L 30, 75 M 30, 75 L 40, 90 M 30, 75 L 20, 90"> </path> <circle cx="30" cy="30" r="10"/> </symbol> </defs> <use xlink:href="#mySymbol" x="0" y="10" width="100" height="150" fill="pink" stroke="red" stroke-width="3"/> <use xlink:href="#mySymbol" x="50" y="80" width="70" height="70" fill="pink" stroke="red" stroke-width="2"/> <use xlink:href="#mySymbol" x="80" y="80" width="70" height="70" fill="lightblue" stroke="blue" stroke-width="2"/> <use xlink:href="#mySymbol" x="100" y="0" width="120" height="160" fill="lightblue" stroke="blue" stroke-width="3"/> </svg>
	Описание
	Применение символа с заданием геометрических размеров, а также заливки и контура.
№	Код	Вид в браузере
5.16.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="200" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title> Лекция 5. Рисование</title> <desc> Пример symbol3.svg </desc> <defs> <symbol id="mySymbol" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M 15, 50 L 45, 50 M 30, 30 L 30, 75 M 30, 75 L 40, 90 M 30, 75 L 20, 90"> </path> <circle cx="30" cy="30" r="10"/> </symbol> <symbol id="myFamily"> <use xlink:href="#mySymbol" x="0" y="10" width="100" height="150" fill="pink" stroke="red" stroke-width="3"/> <use xlink:href="#mySymbol" x="50" y="80" width="70" height="70" fill="pink" stroke="red" stroke-width="2"/> <use xlink:href="#mySymbol" x="80" y="80" width="70" height="70" fill="lightblue" stroke="blue" stroke-width="2"/> <use xlink:href="#mySymbol" x="100" y="0" width="120" height="160" fill="lightblue" stroke="blue" stroke-width="3"/> </symbol> </defs> <use xlink:href="#myFamily" x="0" y="0" width="150" height="150"/> <use xlink:href="#myFamily" x="0" y="120" width="150" height="150"/> <use xlink:href="#myFamily" x="0" y="240" width="150" height="150"/> </svg>
	Описание
	Применение вложенных символов.

Элемент clipPath

(рис 5.5) Инструмент горизонтальный текст-маска в программе Adobe Photoshop

Фрагмент кода для элемента clipPath выглядит так:

<defs>
  <!--Объект clipPath-->
  <clipPath id="myclipPath">
      <circle cx="150" cy="100" r="90">
      </circle>
  </clipPath>
</defs>
<image x="10" y="5" width="291" height="195"
      clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/>

Элемент clipPath.
№	Код	Вид в браузере
5.17.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath1.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="150" cy="100" r="90"> </circle> </clipPath> </defs> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Отсекание части изображения окружностью.
№	Код	Вид в браузере
5.17.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath2.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <polygon points="20,10 280,10 20, 190 280,190" stroke="red" stroke-width="3" fill="lightpink"/> </clipPath> </defs> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Отсекание части изображения элементов `polygon`. (См. polygon3.svg)
№	Код	Вид в браузере
5.17.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath3.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="100" cy="100" r="90"></circle> <circle cx="200" cy="100" r="90"></circle> </clipPath> </defs> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	При наложении двух элементов, определяемых в `clipPath`, занимаемая ими площадь объединяется.
№	Код	Вид в браузере
5.17.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath4.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="100" cy="100" r="90"></circle> <circle cx="200" cy="100" r="90"></circle> </clipPath> </defs> <rect width="300" height="200" x="0" y="0" fill="black"> </rect> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Для оформления можно использовать дополнительные элементы.
№	Код	Вид в браузере
5.17.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath5.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="150" cy="100" r="90"> </circle> </clipPath> </defs> <rect width="300" height="200" x="0" y="0" fill="pink"> </rect> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> <circle cx="150" cy="100" r="90" fill="none" stroke="red" stroke-width="5" stroke-dasharray="5"/> </svg>
	Описание
	Для последовательности элементов, среди которых имеется элемент image, справедлив тот же самый вертикальный порядок.
№	Код	Вид в браузере
5.17.6	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath6.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <text x="2" y="150" font-family="Arial" font-size="150"> АБВ </text> </clipPath> </defs> <image x="0" y="0" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Отсекание части изображения текстом.
№	Код	Вид в браузере
5.17.7	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример clipPath7.svg </desc> <defs> <!--Объект clipPath--> <clipPath id="myclipPath"> <text x="2" y="150" font-family="Arial" font-size="150"> АБВ </text> </clipPath> </defs> <rect width="300" height="200" x="0" y="0" fill="yellow"> </rect> <image x="0" y="0" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> <text x="2" y="150" font-family="Arial" font-size="150" fill="none" stroke="orange" stroke-width="3"> АБВ </text> </svg>
	Описание
	Отсекание части изображения текстом с оформлением.

Элемент mask

<defs>
  <mask id="myMask">
    <circle cx="150" cy="100" r="90" fill="url(#myGradient)">
    </circle>
  </mask>
</defs>
<image x="10" y="5" width="291" height="195"
       mask="url(#myMask)" xlink:href="sea2.jpg"/>


№	Код	Вид в браузере
5.18.1	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример mask1.svg </desc> <defs> <!--Градиент для заливки маски--> <radialGradient id="myGradient"> <stop offset="0%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </radialGradient> <!--Объект mask--> <mask id="myMask"> <circle cx="150" cy="100" r="90" fill="url(#myGradient)"> </circle> </mask> </defs> <image x="10" y="5" width="291" height="195" mask="url(#myMask)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Применение в качестве заполнителя маски окружности с градиентной заливкой.
№	Код	Вид в браузере
5.18.2	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример mask2.svg </desc> <defs> <!--Градиент для заливки маски--> <radialGradient id="myGradient"> <stop offset="80%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </radialGradient> <!--Объект mask--> <mask id="myMask"> <circle cx="150" cy="100" r="90" fill="url(#myGradient)"> </circle> </mask> </defs> <image x="10" y="5" width="291" height="195" mask="url(#myMask)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Применение в качестве заполнителя маски окружности с градиентной заливкой. Уменьшением размера градиентной области достигается увеличение площади открытой поверхности.
№	Код	Вид в браузере
5.18.3	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример mask3.svg </desc> <defs> <!--Градиент для заливки маски--> <radialGradient id="myGradient"> <stop offset="80%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </radialGradient> <!--Объект mask--> <mask id="myMask"> <circle cx="100" cy="100" r="90" fill="url(#myGradient)"> </circle> <circle cx="200" cy="100" r="90" fill="url(#myGradient)"> </circle> </mask> </defs> <image x="10" y="5" width="291" height="195" mask="url(#myMask)" xlink:href="sea2.jpg"/> </svg>
	Описание
	Так же, как и в случае `clipPath`, при использовании нескольких фигур в качестве заполнителя их площади объединяются.
№	Код	Вид в браузере
5.18.4	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример noMask1.svg </desc> <defs> <!--Градиент для заливки маски--> <radialGradient id="myGradient"> <stop offset="80%" stop-color="blue" stop-opacity="0"/> <stop offset="100%" stop-color="blue" stop-opacity="1"/> </radialGradient> <!--Объект clipPath--> <clipPath id="myclipPath"> <circle cx="150" cy="100" r="90"> </circle> </clipPath> </defs> <rect width="300" height="200" x="0" y="0" fill="blue"></rect> <image x="10" y="5" width="291" height="195" clip-path="url(#myclipPath)" xlink:href="sea2.jpg"/> <circle cx="150" cy="100" r="90" fill="url(#myGradient)"> </circle> </svg>
	Описание
	При использовании заполнителя, заполненного градиентом любого цвета, на рисунке заметно уменьшение прозрачности белого цвета. Для получения нужного цвета используется комбинация обычного элемента `clipPath` и наложения радиального градиента с падением прозрачности.
№	Код	Вид в браузере
5.18.5	<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 5. Рисование</title> <desc> Пример mask4.svg </desc> <defs> <!--Градиент для заливки маски--> <linearGradient id="myGradient" x1="0%" y1="0%" x2="0%" y2="100%" > <stop offset="0%" stop-color="white" stop-opacity="1"/> <stop offset="100%" stop-color="white" stop-opacity="0"/> </linearGradient> <!--Объект mask--> <mask id="myMask"> <rect x="0" y="0" width="300" height="200" fill="url(#myGradient)"/> </mask> </defs> <text x="2" y="150" font-family="Arial" font-size="150" fill="red" mask="url(#myMask)"> АБВ </text> </svg>
	Описание
	Маскированный текст.

Мы закончили рассмотрение основных возможностей рисования, связанных с простой графикой.

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Заливка

Линейная градиентная заливка

Радиальная градиентная заливка

Паттерны

Контуры

Маркеры

Элемент symbol

Элемент clipPath

Элемент mask

Заливка

Линейная градиентная заливка

Радиальная градиентная заливка

Паттерны

Контуры

Маркеры

Элемент symbol

Элемент clipPath

Элемент mask

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!