Серед тегів форми 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 рухається до координат початкової точки 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), а потім прямо до точки 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
|
|
|
