Элемент пути SVG
Опубликовано: 26 Февраля, 2022
SVG - это масштабируемая векторная графика. Путь SVG - элемент используется для определения пути , который начинается с позиции и заканчивается в определенное положение. Путь SVG можно использовать для создания любых основных фигур.
Синтаксис:
<path d = "Форма пути с использованием таких ключевых слов, как M, L, C и т. д."
pathLength = "Длина пути"
stroke = "название цвета обводки"
fill = "название цвета">
</path>
Атрибуты: этот элемент принимает четыре атрибута, как указано выше и описано ниже:
- d: используется для определения формы пути.
- М: Он используется для перемещения точки в определенное место.
- L: Он используется для того, чтобы провести линию к точке.
- C: Он используется для создания кривой в точке.
- pathLength: используется для определения общей длины пути.
- обводка: используется для определения цвета обводки.
- fill: используется для определения цвета заливки SVG.
Ниже приведены несколько примеров для лучшего понимания элемента <path> SVG.
Пример 1:
Выход:
Example 2:
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1 style="color:green">GeeksforGeeks SVG Path</h1> <svg viewBox="500 500"> // Creating a rectangle starting point is 10, 10 // Making a line to 10 100 // Moving point to 10 100 // Making line to 100 100 // Moving point to 100 100 // Making line to 100 10 // Moving point to 100 10 // Making line to 10 10 --> <path d="M 10 10 L10 100 M10 100 L100 100 M100 100 L100 10 M100 10 L10 10" stroke="black"> </path> </svg></body></html> |
Выход: 