Это свойство определяет путь.
употребление
Атрибуты определения пути категории
ценность
Вариабельность Да
Документация по спецификациям SVG 1.1 (2-е издание)
Свойство d на самом деле является строкой, содержащей серию описаний путей. Эти пути состоят из следующих инструкций:
- Переход
- Lineto
- Curveto
- Arcto
- ClosePath
Они объединены в цепочку. Эти разные команды чувствительны к регистру; Заглавная команда указывает, что её параметры — абсолютные положения, а строчные — точку относительно текущей позиции. Отрицательное значение можно задать в качестве параметра команды: отрицательный угол будет против часовой стрелки, а абсолютные позиции x и y будут считаться отрицательными координатами. Отрицательное относительное значение x сместится влево, а отрицательное относительное значение y — вверх.
Переход
Команду Moveto можно рассматривать как поднятие ручки для рисования и приземления в другом месте. Между предыдущей и этой точкой не проводится отрезок линии. Хорошая идея начинать путь с команды Moveto, потому что без инициализированного Moveto исходной точкой будет происходить предыдущая операция, что может привести к неопределённому поведению.
Синтаксис:
M x, y здесь x и y — абсолютные координаты, представляющие соответственно горизонтальные и вертикальные координаты.
m dx, dy здесь dx и dy — расстояния относительно текущей точки, справа и вниз соответственно.
Пример:
В абсолютной позиции x=50, y= 100:<путь d="M50,100..." />
Двигайтесь на 50 вправо, на 100 вниз: <путь d="m50,100..." />
Lineto
В отличие от команды Moveto, команда Lineto рисует прямой сегмент. Этот прямой сегмент перемещается из текущей позиции в указанную точку. Синтаксис родной команды Lineto — «L x, y» или «l dx, dy», где x и y — абсолютные координаты, а dx и dy — расстояния справа и вниз соответственно. Существуют также буквы H и V, которые обозначают горизонтальное и вертикальное движения соответственно. У них тот же синтаксис, что и у L, и их строчная форма — относительное расстояние, а заглавная — абсолютная позиция.
Curveto
Команда Curvto задаёт кривую Безье. Существует два типа кривых Безье: кубические и квадратичные. Квадратичная кривая Безье — это специальная кубическая кривая Безье, в которой два конца контрольной точки совпадают. Синтаксис квадратичной кривой Безье — «Q cx, cy x, y» или «q dcx, dcy dx, dy». Cx и Cy — это абсолютные координаты контрольных точек, а DCX и DCY — расстояния контрольных точек в направлениях X и Y соответственно.
Кубическая кривая Безье следует той же концепции, что и квадратичная кривая Безье, но требует рассмотрения двух контрольных точок. Синтаксис кубической кривой Безье: «C c1x, c1y c2x, c2y x, y» или «c dc1x, dc1y dc2x, dc2y dx, dy», где c1x, c1y и c2x, c2y — абсолютные координаты контрольных точек начальной и конечной точек соответственно. DC1X, DC1Y и DC2X, DC2Y относятся к исходной точке, а не к конечной точке. dx и dy — это расстояния справа и вниз соответственно.
Чтобы соединить гладкие кривые Безье, можно также использовать команды T и S. Их синтаксис проще, чем у других команд Curveto, потому что предполагается, что первая контрольная точка отражает предыдущую точку на предыдущей, или что она действительно является предыдущей точкой, если её не существует. Синтаксис T — «T x,y» или «t dx,dy», что соответствует абсолютным координатам и относительным расстояниям соответственно, и используется для создания квадратичной кривой Безье. S используется для создания кубической кривой Безье, синтаксис — «S cx, cy x, y» или «s dcx, dcy dx, dy», где (d)cx указывает вторую контрольную точку.
Наконец, все команды кривой Безье могут создавать многогранный граф Безье, сначала инициализировать команду, а затем многократно указывать все параметры для создания многогранного графа Безье. Таким образом, следующие две команды могут создать абсолютно один и тот же путь:
Arcto
Иногда проще описать путь эллиптической дуговой кривой, чем путь кривой Безье. В конечном итоге элемент пути поддерживает команду Arcto. Центр дуги рассчитывается другими переменными. Декларация arcto — это относительно повторение Visual Studio: «A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y». При деконструкции rx и ry — это радиусы в направлениях x и y соответственно, а значение LargeArcFlag равно 0 или 1, чтобы определить, рисовать ли малую дугу (0) или большую дугу (1). SweepFlag также имеет значения 0 или 1, которые используются для определения того, идёт ли дуга по часовой стрелке (1) или против часовой стрелки (0). x и y — координаты пункта назначения. Хотя xAxisRotate поддерживает изменение ориентации оси x относительно текущей системы отсчёта, этот параметр, по-видимому, мало влияет на Gecko 7.
ClosePath
Команда ClosePath просто проведёт прямую линию от текущей точки до первой точки текущего пути. Это самая простая команда, не имеющая никаких параметров. Он следует по самой короткой линейной траектории к начальной точке, и если другие пути идут по этому пути, возможные пути пересекаются. Синтаксис — «Z» или «z», и оба метода письма выполняют одинаковую функцию.
элемент
Следующие элементы могут использовать атрибут d:
Те же правила <animate>применимы и к путям анимации.
Напоминание
Начало координат (координатная система 0,0 точек) часто находится в верхнем левом углу контекста. Однако <glyph>происхождение элемента находится в нижнем левом углу почтового ящика.
Между любыми двумя цифрами допускается запятая, но нигде больше не допускается.
пример
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Чтобы показать, что на самом деле означает d="M37,17v15H14V17H37z M50,0H0v50h50V0z", давайте обсудим каждый подабзац этой строки.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Это свойство содержит строки, составляющие весь SVG.
M37,17
M — это сокращение от MoveTo. Заглавная буква «M» означает абсолютные координаты, а строчная «m» — относительное расстояние. Это подразумевает, что она основана на координатах начала, линия находится внутри коробки, а вы начинаете в верхнем правом углу прямоугольника внутри коробки.
37 — это аббревиатура начальной позиции svg, на 37 пикселях по оси X.
17 Старт позиции svg, на 17 пикселях по оси y.
v15
v означает вертикальный. Заглавная буква V обозначает абсолютные координаты, а строчная V — относительную длину и расстояние. dx/dy и x/y можно использовать в соответствующих позициях H/V и h/v.
Здесь она изображается как нарисованная вертикальная линия длиной 15 пикселей относительно заданной координаты. Это значит, что вы рисуете 15 пикселей до координат 37, 32.
H14
H означает уровень, который является абсолютными координатами, потому что пишется с заглавной буквы.
С конца v15 проведите горизонтальную линию до достижения абсолютной координаты 14, и завершите рисование, когда она достигнет x-координаты 14. Штрихи расположены по координатам 14, 32.
V17
Как и раньше, начните с конца предыдущей линии и проведите вертикальную линию, пока не достигнете координаты оси y 17. Штрихи расположены по координатам 14, 17.
H37
Наконец, начиная с 14, 17, проведите горизонтальную линию, пока не достигнете координаты оси x 37. Штрих расположен по координатам 37,17 (значение M)
z
И строчная, и заглавная буква Z закрывают серию сегментов SVG.
,
Запятая начинает следующую строку простых векторных графических сегментов. Следующая серия простых векторных отрезков составит внешнюю коробку.
M50,0
Начните с оси x 50 и оси y 0.
H0
Проведите прямую линию до (0,0).
V50
Проведите вертикальную линию с размером 0,0 пикселей относительно 50. Эта черта будет протянута до (0,50).
h50
Проведите горизонтальную линию из 50 пикселей относительно (0,-50). Эта черта будет проведена справа к (50,50).
V0
Проведите вертикальную линию, пока не достигнете координаты оси y 0. Это проведёт линию до (50,0), что является значением M.
z
И строчная, и заглавная буква Z закрывают серию сегментов SVG.
Приложите код:
Наконец, прилагается ссылка на документ: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Опубликовано 04.05.2018 11:29:47
|
|
|
|
