Question

我需要在HTML中添加连接图表节点的曲线。我想使用 仅HTML和/或CSS 创建它们。即使并非所有浏览器都支持我需要的功能（特别是不关心IE8及以下），我对CSS3也没问题。以下是我可以使用的解决方案：

canvas或svg - 不喜欢它，因为当我有数百甚至数千个这些对象漂浮在我的好节点之间时，我必须处理浏览器差异而不确定性能< / LI>
图片 - 我需要一些荒谬的图像来处理所有可能的曲线，并且在放大和缩小时图像根本无法很好地缩放
div用css border-radius和另一个div来覆盖我们不想要的行部分 - 不担心IE8及以下不支持这个，但这是一个丑陋的黑客我不能在背景或其他线条重叠的任何东西上产生曲线。我可以吗？

我错过了哪些选项？是否可以使用一个只有1个角可见的边界半径的div（并且可以在IE8及以下的所有浏览器上工作）？

Answer 1

你可能应该使用canvas，因为canvas是专为绘制内容而设计的。使用canvas的性能应该优于使用DOM元素，尤其是使用GPU加速进行绘制的新版本。

无论如何，您始终可以使用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的支持。

您可以在a single path中绘制所有行，并且只有一个对象可以处理，只要您不打算一直添加和删除行。路径中的所有线条都必须是相同的颜色，因此您需要的路径与线条颜色一样多。