Кривые линии на HTML/CSS/SVG
Как это можно реализовать ? Пробовал вставить 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>