Изогнутые линии, использующие только HTML и/или CSS

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

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

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

Ответы

Ответ 1

Вероятно, вы должны использовать 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, и еще труднее контролировать.

Ответ 2

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

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