仅使用 HTML 和/或 CSS 的曲线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4698830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Curved lines using only HTML and/or CSS
提问by at.
I need to add curved lines connecting nodes of a diagram in HTML. I want to create them using only HTML and/or CSS. I'm ok with CSS3 even if not all browsers support the feature I need (particularly don't care so much about IE8 and below). Here are solutions I could use with reasons against them:
我需要在 HTML 中添加连接图表节点的曲线。我想只使用HTML 和/或 CSS创建它们。即使并非所有浏览器都支持我需要的功能（尤其是不太关心 IE8 及更低版本），我对 CSS3 还可以。以下是我可以根据理由使用的解决方案：
- canvas or svg- don't like it because I have to then deal with browser differences and not sure of performance when I have hundreds, maybe thousands, of these objects floating between my nice nodes
- image- I would need a ridiculous number of images to deal with all the possible curved lines and an image doesn't scale nicely at all when zooming in and out
- div with a css border-radius and another div that covers the portion of the lines we don't want- not worried about IE8 and below not supporting this, but this is an ugly hack where I can't have the resulting curved lines over anything like a background or other lines overlapping. Can I?
- canvas 或 svg- 不喜欢它，因为当我有数百个甚至数千个这些对象漂浮在我的好节点之间时，我必须处理浏览器差异并且不确定性能
- 图像- 我需要大量的图像来处理所有可能的曲线，并且在放大和缩小时图像根本无法很好地缩放
- div 带有 css border-radius 和另一个 div 覆盖了我们不想要的部分线条- 不担心 IE8 及以下不支持这一点，但这是一个丑陋的 hack，我不能得到结果曲线任何像背景或其他线条重叠的东西。我可以吗？
What options am I missing? Is it possible to have a div with a border-radius that is visible for only 1 corner (and work on all browsers except IE8 and below)?
我缺少哪些选项？是否有可能有一个边界半径仅对 1 个角可见的 div（并且适用于除 IE8 及以下的所有浏览器）？
回答by Yi Jiang
You should probably be using canvas, since canvas is designed for drawing stuff. The performance of using canvasshould be better than using DOM elements, especially with newer versions that uses GPU acceleration for drawing.
您可能应该使用canvas，因为画布是为绘画而设计的。使用的性能canvas应该比使用DOM元素更好，尤其是使用GPU加速进行绘图的较新版本。
Anyway, you can always use border-radiuscombined with border-widthor border-colorto create curves by showing only one side of the border of element, while hiding all others:
无论如何，您始终可以通过仅显示元素边框的一侧，同时隐藏所有其他侧来使用border-radius与border-width或组合border-color来创建曲线：
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curves.color div {
border-width: 0 0 0 1px;
}
Combining this with different combinations of border-radius, and you've got yourself some curves. I've whipped up a very simple demo for this here: http://www.jsfiddle.net/yijiang/nDxYJ/
将此与 的不同组合相结合border-radius，您就会得到一些曲线。我在这里做了一个非常简单的演示：http: //www.jsfiddle.net/yijiang/nDxYJ/
You can even combine it with CSS3 transformrotation and transformation for more flexibility. It is, however, still more restrictive than using canvas, and more difficult to control too.
您甚至可以将其与 CSS3transform旋转和变换结合使用以获得更大的灵活性。但是，它仍然比使用 限制canvas更多，也更难以控制。
回答by robertc
I think for hundreds, even up to thousands of objects, then SVG performance is not going to be too bad, certainly no worse than any other way you might approach it. The main performance issue would be in IE where you'd have to use some method to fall back to VML or Flash and you say you're not too concerned about IE8 support.
我认为对于数百个，甚至多达数千个对象，SVG 性能不会太差，当然不会比您可能接近它的任何其他方式差。主要的性能问题是在 IE 中，您必须使用某种方法回退到 VML 或 Flash，并且您说您不太关心 IE8 支持。
You could draw all the lines in a single pathand only have one object to deal with, as long as you're not going to be adding and removing lines all the time. All the lines in a path would have to be the same colour, so you'll need as many paths as you have colours of lines.
您可以在一条路径中绘制所有线条并且只处理一个对象，只要您不打算一直添加和删除线条。路径中的所有线条都必须是相同的颜色，因此您将需要与线条颜色一样多的路径。
