Слово Polygon пришло из древнегреческого языка. Poly – много, gonia – угол, буквально многоугольник. SVG элемент <polygon> выводит любые многоугольные замкнутые фигуры, такие как: треугольник, параллепипед, квадрат, пятиугольник, шестиугольник и т.д. Как и у элемента polyline цифры внутри параметра points=”60,25 140,25″ разделены пробелами на группы. Внутри группы первая цифра – это координата “x”, вторая цифра после запятой – это координата “y”.
|
1 2 3 |
<polygon points="60,25 140,25 160,60 80,60 " style="fill: yellow; fill-opacity:0.5; stroke: black;" /> |
Первая группа цифр определяет координаты начала первой линии, вторая группа определяет конец первой линии и одновременно начало второй линии и т.д.
Основное отличие элемента <polygon> от элемента <polyline> заключается в том, что он всегда выводит замкнутые фигуры. Последний отрезок прямой появляется автоматически, замыкая конец последнего отрезка с началом первого отрезка многогранной фигуры.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- star --> <polygon points="75,77.5 77.9,86.1 86.9,86.1 79.7,91.5 82.3,100.1 75,95 67.7,100.1 70.3,91.5 63.1,86.1 72.1,86.1" style="fill: red; stroke: green;" /> <!-- parallelogram --> <polygon points="60,25 140,25 160,60 80,60 " style="fill: yellow; fill-opacity:0.5; stroke: black;" /> <!-- pentagon --> <polygon points="50,147.5 87.5,120 122.5,147.5 110,190 65,190" style="fill: blue; fill-opacity:0.7; stroke: black; " /> <!--hexagon --> <polygon points="147.5, 137.5, 177.5, 120 207.5, 137.5 207.5, 172.5 177.5, 190 147.5, 172.5" style="fill: green; fill-opacity:0.7; stroke: black; " /> |
Заполнение цветом многоугольников с пересекающимися линиями
Для многоугольников, у которых нет пересекающихся линий, легко определить внутреннюю и наружную часть пространства. Поэтому для заливки цветом внутренней части многоугольника используется общее правило, например fill=”green”. Но для сложных фигур не совсем легко определить, где внутренняя часть, а где наружная. Поэтому используется дополнительное правило заливки fill-rule:, которое может принимать два значения: nonzero – сплошная заливка и evenodd – внутренняя часть фигуры не заливается см. Рис.2.
|
1 2 3 4 5 |
<polygon points="88,56 56,136 136,88 40,88 120,136" style="fill-rule: nonzero; fill: #00BD00; stroke: black; stroke-width: 1px;" /> <polygon points="158,116 126,196 206,148 110,148 190,196" style="fill-rule: evenodd; fill: #00BD00; stroke: black; stroke-width: 1px;" /> |
Подробнее о правиле “fill-rule” – здесь.
⇚ SVG polyline SVG rect element ⇛
“Заполнение цветом многоульников с пересекающимися линиями”
Слово “многоугольников” с ошибкой:)
@slv850 Спасибо за внимательность,
Исправил ошибку.