Я@R

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Я@R » Претечи » Кисти и их свойства

Кисти и их свойства

Страница: 1

Сообщений 1 страница 10 из 10

1

  • Автор: АВК
  • Автор
  • АВК

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

Основные свойсва
Любой рисунок имет два основных свойства. Это его форма/размерность и цвет. Кисти имеют два основных атрибута цвета. Это - цвет границы stroke с толщиной stroke-width и цвет заливки фона fill. Последний агргумент может передаваться не только в виде цвета, но и в виде градиента или объекта. Конкретно о конструкции этих свойств объекта поговорим позже, а сейчас перейдем к рассказу об конструкции кисти

Во всех случаях если свойство stroke не указывается, то внешняя граница не рисуется. Отсутствие свойства fill всегда воспринимается заливкой - черного цвета. Если нужно, чтобы заливка отсутствовала то необходимо свойство fill="transparent" записать в таком виде. Дополнительно можно использовать так же fill="none"

2

  • Автор: АВК
  • Автор
  • АВК

<rect> - прямоугольник
Кисть rect рисуется прямоугольник с границей и заливкой, в начальных координатах x и y, по соответствующим осям, шириной width и высотой height.
[html]<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100">
  <rect width="100%" height="100%" />
</svg>[/html]

Код:
<rect x="0" y="0" width="100" height="100" />

3

  • Автор: АВК
  • Автор
  • АВК

<rect> - прямоугольник с закруглениями углов
Если указаны два дополнительных параметра, то у прямоугольника рисуются радиусы углов rx и ry привязаные так же к своим осям
[html]<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100">
  <rect width="100%" height="100%"
    rx="50" ry="30" fill="blue"/>
</svg>[/html]

Код:
<rect rx="50" ry="30"
width="100" height="100" fill="blue" />

4

  • Автор: АВК
  • Автор
  • АВК

<rect> - прямоугольник с границей и прозрачный
Прямоугольник с границей оранжевого цвета толщиной в 10 пикселов, но без заливки выглядит так. Дополнительно кроме цвета границы - stroke, задается ее толщина и обязательно атрибут fill имеет значение transporent. В противном случае поле будет залито черным цветом.
[html]<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100">
  <rect x="10" y="10" width="80" height="80"
    stroke-width="10" stroke="orange" fill="transparent" />
</svg>[/html]

Код:
<rect x="10" y="10"
width="80" height="80" stroke-width="10" 
stroke="orange" fill="transparent" />

5

  • Автор: АВК
  • Автор
  • АВК

<circle> - окружность
Кисть circle отрисовывает окружность с границей и заливкой. Основными координатами служат положение ее центра по осям - cx и cy и значение радиуса r
[html]<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="100">
  <circle  cx="50" cy="50" r="40" stroke-width="10"
    stroke="pink" fill="#8CF"/>
</svg>[/html]

Код:
<circle  cx="50" cy="50" r="40" fill="#8CE"
stroke-width="10" stroke="pink" />

6

  • Автор: АВК
  • Автор
  • АВК

<ellipse> - эллипс
Кисть ellipse отрисовывает эллипс с границей и заливкой. Основными координатами служат положение ее центра по осям - cx и cy и значение радиусов по своим осям rx и ry, соответственно.
[html]<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="60">
  <ellipse  cx="50" cy="30" rx="40" ry="20"
    stroke-width="5"  stroke="#CC8" fill="#FCF"/>
</svg>[/html]

Код:
<ellipse  cx="50" cy="30" 
rx="40" ry="20" stroke-width="5"
stroke="#CC8" fill="#FCF" />

7

  • Автор: АВК
  • Автор
  • АВК

<line> - линия
Кисть line отрисовывает линию цветом и толщиной, с координатами x1,y1 начала и x2,y2 конца.
[html]<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="50">
  <line  x1="10" y1="10" x2="90" y2="40"
    stroke-width="10"  stroke="red"/>
</svg>[/html]

Код:
<line  x1="10" y1="10" x2="80" y2="40"
stroke-width="10"  stroke="red" />

8

  • Автор: АВК
  • Автор
  • АВК

<polyline> - полилиния
Кисть polyline отрисовывает линию цветом и толщиной, с координатами, заданными парами значений x,y от начала до конца линии, в блоке свойства points. Координаты всегда пара чисел, разделенных любым допустимым знаком, в т.ч и переводом строки.
[html]<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="60">
  <polyline points="10 10 20 20 30 15 40 30 50 25 60 40
    70 35 80 50 90 45" stroke-width="3"  stroke="blue" />
</svg>[/html]

Код:
<polyline points="10 10 20 20 30 15 40 30 
50 25 60 40 70 35 80 50 90 45" 
stroke-width="3"  stroke="blue" />

9

  • Автор: АВК
  • Автор
  • АВК

<polygon> - полигон
Кисть polygon отрисовывает замкнутую в начале линию цветом и толщиной, с заливкой с координатами, заданными парами значений x,y от начала до предпоследней точки линии, в блоке свойства points. Координаты всегда пара чисел, разделенных любым допустимым знаком,в т.ч и переводом строки.
[html]<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="70">
  <polygon points="50 10 55 30 70 30 60 40 65 55 50 45
    35 55 40 40 30 30 45 30" stroke-width="5"
    stroke-linejoin="miter" stroke="red" />
</svg>[/html]

Код:
<polygon points="50 10 55 30 70 30 60 40 65 55 
50 45 35 55 40 40 30 30 45 30" 
stroke-width="5"  stroke="red"  />

10

  • Автор: АВК
  • Автор
  • АВК

<path> - часть
Кисть path наиболее универсальный инструмент изображения различных непрерывных объектов формата. Ей можно рисовать как закрытые объекты , типа полигонов, так и полилини, причем отрезки линий могут быть как прямые линии, так и кривые, типа дуг или линий безье. Рисунок имееет цвета границы и заливки с координатами, заданными специальными точками в блоке свойства d. Здесь приводится лишь демонстрация кисти, а самим правилам задания координат мы посвещаем отдельную главу.
[html]<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1" width="100" height="60">
  <path d="M20,30 Q40,05 50,30 T90,30"
    stroke-width="5"  stroke="green" fill="none" />
</svg>[/html]

Код:
<path d="M20,30 Q40,05 50,30 T90,30"
stroke-width="5"  stroke="green"
fill="none"  />
Страница: 1

Вы здесь » Я@R » Претечи » Кисти и их свойства