Кривые линии на HTML/CSS/SVG

Рейтинг: 1Ответов: 1Опубликовано: 25.01.2023

введите сюда описание изображения Как это можно реализовать ? Пробовал вставить svg-код линии в html, но получается, что линия занимает площадь прямоугольника.

css html svg
Источник: Stack Overflow на русском

Ответы

▲ 1

Может сработать тег <path> в SVG. Просто укажите координаты для кривой линии с помощью атрибута d. Чтобы создать квадратную кривую линию:

<svg>
  <path d="M10 10 Q 25 25, 40 10" stroke="black" fill="none" />
</svg>

M - начальная точка линии, Q обозначает кривую Безье, где 25 25 это контрольная точка, а 40 10 - конеч. точка линии. А свойство stroke-width устанавливает ширину линии.

Если вы вставляете SVG-код линии в HTML, убедитесь, что ширина и высота SVG элемента соответствуют ширине и высоте линии, иначе линия будет занимать площадь прямоугольника. Если вы будете вставлять SVG-код линии в HTML проверьте, ширина и высота SVG элемента соот-т ширине и высоте линии, т.к. линия будет занимать площ. прямоугольника.

Можно еще сделать так:

<svg>
  <path d="M10 10 C 15 5, 25 15, 40 10" stroke="black" fill="none" />
</svg>

или так

<svg width="50" height="50">
  <path d="M10 10 Q 25 25, 40 10" stroke="black" fill="none" />
</svg>