Среди SVG-тегов формы путь является самым мощным, и освоение пути достаточно для решения распространённых задач рисования.
Давайте сначала рассмотрим основное применение тега пути:
<путь d="M100,100 L200,200 L200,400" fill="#333" ход = "#000" />
Тег пути определяет путь через свойство d, которое определяет информацию, состоящую из строки, а путь также может быть определен атрибутами заполнения и штриха для определения заполнения и рамки.
Информация о атрибуте d на самом деле не сложна: она состоит из букв и цифр, числа представляют координатные точки, а буквы отвечают за то, как соединять эти координаты. Например, в приведённом выше примере M представляет начальную точку, а L — прямолинейную связь, поэтому информацию о d можно интерпретировать следующим образом:
M100 100 -> начинается в координатной точке (100 100)
L200,200 -> Проведите прямую линию от (100,100) до (200,200).
L200,400 -> Проведите прямую линию от (200,200) до (200,400).
В атрибуте d тега пути существует всего 10 команд, которые можно использовать, и следующие 5 команд являются базовыми и относительно простыми.
M движется к координатам (moveTo) x,y координат начальной точки
Z closepath соединяет начальную и конечную точки пути по прямой линии
L lineTo: Текущий узел соединяется по прямой линии с указанным узлом (x,y)
Горизонтальная линия h x сохраняет координаты y текущей точки постоянной, а ось x движется к x, образуя горизонтальную линию
V вертикальная линия y сохраняет координаты x текущей точки без изменений, а ось y переходит к y, образуя вертикальную прямую
М и Л
Давайте рассмотрим другой пример M и L
<путь d="M30,30 L170,30 L30,170 L170,170"></path>
От точки А (30, 30) прямая линия проводится к точке B (170, 30), затем прямо в точку C (30, 170), а затем прямо в точку D (170, 170), и в итоге образует Z-образный путь.
Эффект заполнения и Z
<путь d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
В этом описании пути есть две буквы M, поэтому в одном из них появляются два относительно независимых пути, первый такой же, как в приведённом выше примере, который имеет Z-образную форму.
Второй путь — это прямоугольник, в описании которого появляется команда Z, указывающая на то, что он соединяет начало и конец пути.
Кроме того, здесь мы определяем свойство заполнения для пути, и видно, что заполнение вступит в силу независимо от того, замкнут ли он или нет.
H и V
Наконец, давайте рассмотрим две команды H и V, которые на самом деле являются аббревиатурой команды L, когда ось x или y остаётся неизменной, поэтому описываются следующие два конца, и нарисованная картина остаётся той же.
<путь d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
<путь d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="жёлтый"></path>
|
Опубликовано 14.08.2017 13:15:15
|
|
|
