Атрибут SVG pathLength
Опубликовано: 25 Февраля, 2022
Атрибут pathLength определяет общую длину пути в пользовательских единицах. Этот атрибут использует следующие элементы: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> и <rect>.
Синтаксис:
pathLength = число
Значения атрибутов: атрибут pathLength принимает значения, упомянутые выше и описанные ниже.
- число: это либо число с дробной частью, либо целое число.
Примеры ниже иллюстрируют использование атрибута pathLength.
Exmaple 1:
HTML
<!DOCTYPE html> < html > < head > < style > path { stroke: green; stroke-width: 5; stroke-dasharray: 12; } </ style > </ head > < body > < h2 style = "color: green;" > GeeksforGeeks </ h2 > < svg viewBox = " 0 0 400 60" < path d = "M 0,10 h100" /> < path d = "M 0,20 h100" pathLength = "80" /> </ svg > </ body > </ html > |
Выход:
Example 2:
HTML
<!DOCTYPE html> < html > < head > < style > path { stroke: green; stroke-width: 5; stroke-dasharray: 12; } </ style > </ head > < body > < h2 style = "color: green;" > GeeksforGeeks </ h2 > < svg viewBox = "0 20 400 60" < path d = "M 0,30 h100" pathLength = "60" /> < path d = "M 0,40 h100" pathLength = "30" /> < path d = "M 0,50 h100" pathLength = "10" /> </ svg > </ body > </ html > |
Выход: