Ця властивість визначає шлях.
використання
Атрибути визначення шляхів категорії
цінність
Варіабельність Так
Технічна документація 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">
<заповнення шляху="#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
|
|
|
|
