Сред 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) правата линия се чертае до точка Б (170, 30), след това направо до точка В (30, 170), и след това направо до точка Д (170, 170), и накрая образува път във формата на З.
Ефект на запълване и Z
<path 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 остават непроменени, така че следващите два края са описани и нарисуваната картина е същата.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="yellow"></path>
|
Публикувано в 14.08.2017 г. 13:15:15 ч.
|
|
|
