Кривые линии с использованием только HTML и / или CSS

Question

Мне нужно добавить кривые линии, соединяющие узлы диаграммы в HTML.Я хочу создать их, используя только HTML и / или CSS .Я в порядке с CSS3, даже если не все браузеры поддерживают нужную мне функцию (особенно меня не волнует IE8 и ниже).Вот решения, которые я мог бы использовать с причинами против них:

• canvas или svg - не нравится, потому что мне приходится иметь дело с различиями браузера и не уверен в производительности, когдаУ меня есть сотни, может быть, тысячи этих объектов, плавающих между моими красивыми узлами
• image - мне понадобится смешное количество изображений, чтобы справиться со всеми возможными изогнутыми линиями, а изображение не 'При масштабировании
• делится с помощью CSS-граничного радиуса и другого делителя, который покрывает часть строк, которые нам не нужны - не беспокоится о IE8 иниже не поддерживает это, но это уродливый хак, где я не могу получить результирующие изогнутые линии над чем-то вроде фона или других перекрывающихся линий.Могу ли я?

Какие варианты мне не хватает?Возможно ли иметь div с радиусом границы, который виден только для 1 угла (и работать во всех браузерах, кроме IE8 и ниже)?

Answer 1

Вероятно, вы должны использовать canvas, так как canvas предназначен для рисования. Производительность использования canvas должна быть лучше, чем использование элементов DOM, особенно в новых версиях, использующих ускорение графического процессора для рисования.

В любом случае, вы всегда можете использовать border-radius в сочетании с border-width или border-color для создания кривых, показывая только одну сторону границы элемента, скрывая все остальные:

#curves.width div {
    border-color: transparent transparent transparent #999;
}

#curves.color div {
    border-width: 0 0 0 1px;
}

Комбинируя это с различными комбинациями border-radius, вы получаете несколько кривых. Я сделал очень простую демонстрацию для этого здесь: http://www.jsfiddle.net/yijiang/nDxYJ/

Вы можете даже комбинировать его с вращением и преобразованием CSS3 transform для большей гибкости. Это, однако, все еще более ограничительно, чем использование canvas, и его также сложнее контролировать.

Answer 2

Я думаю, что для сотен, даже для тысяч объектов, производительность SVG не будет слишком плохой, конечно, не хуже, чем любой другой способ, которым вы можете приблизиться к нему. Основная проблема с производительностью - в IE, где вам придется использовать какой-то метод для перехода к VML или Flash, и вы говорите, что не слишком озабочены поддержкой IE8.

Вы можете нарисовать все линии в по одному пути и иметь только один объект для работы, если только вы не собираетесь добавлять и удалять линии все время. Все линии в пути должны быть одного цвета, поэтому вам потребуется столько путей, сколько цветов линий.