Основные фигуры. Многоугольник.

В дополнение к прямоугольнику, кругу и эллипсу, можно так же нарисовать шестиугольник, восьмиугольник, звезду или другие произвольные фигуры замкнутой формы. Элемент <polygon> позволяет указать серию точек, которые описывают геометрическую фигуру. Она может быть залита и иметь контур. Атрибут points содержит серию пар х- и у-координат, разделенных запятыми или пробелами. В этой серии чисел должно присутствовать четное количество компонентов. Возвращаться в начальную точку нет необходимости: фигура сама автоматически замкнет контур. Посмотрим в действии на <polygon>: нарисуем параллелограмм, звезду и фигуру неправильной формы:

<svg width="200px" height="200px" viewBox="0 0 200 200">
	<!-- параллелограмм -->
	<polygon points="15,10 55, 10 45, 20 5, 20" style="fill: red; stroke: black;" />
	<!-- звезда -->
	<polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1" style="fill: #ccffcc; stroke: green;" />
	<!-- странная фигура -->
	<polygon points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95" style="fill: yellow; fill-opacity: 0.5; stroke: black; stroke-width: 2;" />
</svg>

Результат в «живую» или смотрим на картинке:

Заливка многоугольников с пересекающимися линиями

У многоугольников, показанных выше, очень легко закрасить внутреннюю поверхность. Линии, которые формируют многоугольник не пересекаются друг с другом. Поэтому внутреннюю часть легко отличить от внешней. Другое дело когда линии пересекаются. Бывает сразу и не скажешь, где внутренняя часть фигуры. Для тех кто сомневается, смотрим следующий пример:

<svg width="200px" height="200px" viewBox="0 0 200 200">
	<polygon points="48,16 16,96 96,48 0,48 80,96" style="stroke: black; fill: none;" />
</svg>

И так, средняя секция звезды находится внутри или снаружи контура?

В SVG есть два алгоритма для определения находится ли часть многоугольника внутри этого многоугольника или снаружи. Контролирует это правило fill-rule (относится к оформлению). Имеет два варианта значения: nonzero или evenodd. В зависимости от выбранного значения правила получается разный эффект. Посмотрим на примере разницу:

<svg width="200px" height="200px" viewBox="0 0 200 200">
	<polygon style="fill-rule: nonzero; fill: yellow; stroke: black;" points="48,16 16,96 96,48 0,48 80,96" />
	<polygon style="fill-rule: evenodd; fill: #00ff00; stroke: black;" points="148,16 116,96 196,48 100,48 180,96" />
</svg>

Результат в «живую» или смотрим на картинке:

Объяснение правил заливки

Не обязательно знать детали fill-rules для того, чтобы пользоваться этим правилом, но мы все же расскажем как оно работают. Правило nonzero определяет положение точки (находится внутри или за пределами многоугольника), путем проведения луча от точки в бесконечность в любом направлении. Счет начинается с нуля. К этому счету добавляется 1, каждый раз когда луч пересекает контур фигуры, который рисовался слева направо. И вычитаем 1, когда пересекает контур с направлением справа налево. После подсчета переходов, если результат равен нулю, то точка находится вне фигуры. В противном случае, она находится внутри.

Правило evenodd также рисует луч от точки в бесконечность, с подсчетом количества раз пересечения контуров фигуры. Но в данном случае подсчитывается только количество раз, сколько раз данный луч пересек контуры фигуры. Если общее количествово пересечений нечетное — точка внутри многоугольника, если четное — за пределами.

Куда дальше

• следующая — Основные фигуры. Ломанная линия.
• предыдущая — Основные фигуры. Круги и эллипсы.
• содержание