Как это можно реализовать ? Пробовал вставить svg-код линии в html, но получается, что линия занимает площадь прямоугольника.
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>
линия занимает площадь прямоугольника
много разных смыслов — лучше один раз увидеть, и не стесняйтесь добавить описание задачи в вопрос — что именно вызывает сложность, какого результата добиваетесь (в том числе ограничения по коду если есть)