Това свойство дефинира пътя.
Използване
Атрибути за дефиниция на пътя на категория
стойност
Вариабилност Да
Документация за спецификация SVG 1.1 (2-ро издание)
Свойството d всъщност е низ, който съдържа серия от описания на пътища. Тези пътища се състоят от следните инструкции:
- Преместване
- Lineto
- Кървто
- Аркто
- ClosePath
Те се комбинират в низ. Тези различни команди са чувствителни към букви; Команда с главна буква показва, че параметрите ѝ са абсолютни позиции, докато малките команди показват точка спрямо текущата позиция. Отрицателна стойност може да се зададе като параметър за командата: отрицателният ъгъл ще бъде обратно на часовниковата стрелка, а абсолютните позиции x и y ще се считат за отрицателни координати. Отрицателната относителна стойност x ще се премести наляво, докато отрицателната относителна стойност y ще се издигне нагоре.
Преместване
Командата Moveto може да се разглежда като взимане на писалка за рисуване и кацане на друго място. Между предишната точка и тази посочена точка не е начертано отсечка. Добра идея е да започнете път с команда Moveto, защото без инициализирано Moveto началната точка ще бъде там, където е извършена предишната операция, което може да доведе до неопределено поведение.
Синтаксис:
M x, y тук x и y са абсолютни координати, представляващи съответно хоризонтални и вертикални координати.
m dx, dy тук dx и dy са разстоянията спрямо текущата точка, съответно вдясно и надолу.
Пример:
При абсолютна позиция x=50, y= 100:<path 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, а малката им версия е относително разстояние, а главната е абсолютната позиция.
Кървто
Командата 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 е сравнително повторение на 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
Както преди, започнете от края на предишната линия и начертайте вертикална линия, докато достигнете координата 17 по оста y. Ударите са разположени на координати 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
|
Публикувано в 4.05.2018 г. 11:29:47 ч.
|
|
|
|
