仅使用HTML和/或CSS的曲线

Question

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

• canvas或svg - 不喜欢它,因为当我有数百甚至数千个这些对象漂浮在我的好节点之间时,我必须处理浏览器差异而不确定性能
• image - 我需要一些荒谬的图像来处理所有可能的曲线,并且在放大和缩小时图像根本无法很好地缩放
• 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 支持。

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