html - 布局的 CSS 与 SVG

Question

我正在开发一个具有特定布局的网络应用程序。
我主要使用 CSS 为按钮设置样式，并使用 div 为其他布局项设置样式。
问题是有时我需要一个非矩形的布局项。
此外，设计 SVG 更容易，有时可能会产生更好的结果。
我的问题是:我应该始终将 CSS 用于布局，例如 - 组合 div 以实现非矩形效果 - 还是应该将 SVG 用于某些布局元素？
另外 - 按钮 - CSS 或 SVG 怎么样？
谢谢!

Answer 1

请记住，旧版浏览器不支持 SVG。特别是在 IE8 和更早版本中。因此，使用 SVG 会限制您的受众。

可以装配旧版本的 IE 以支持 SVG - 有许多 Javascript 库可以将 SVG 转换为 VML，这是 Microsoft 专有的 SVG 替代品。但是，这确实意味着您不必要地运行 Javascript 代码；您可能会在 IE 中导致性能问题，或者更糟的是，它可能加载得足够慢以至于布局在加载后重绘。

因此，出于跨浏览器兼容性的原因，我建议不要将 SVG 用于您的基本页面布局。

我会使用 SVG 的地方是图形和图表等。对于这些，我会使用 Raphael javascript 库，它使绘制 SVG 变得非常容易，并且还在 IE 中将其呈现为 VML，而无需进行任何显式转换。

为了在 CSS 中创建非正方形元素，有一种技巧可以使用 CSS 边框来绘制三 Angular 形和其他形状。这适用于所有浏览器(在 IE6 中有一些小警告)，因此非常适合创建标记箭头和对话泡泡等局部效果。

参见 http://jonrohan.me/guide/css/creating-triangles-in-css/有关这方面的更多信息。

非常适合点效果，但应该强调我不推荐它用于复杂的形状；我见过一些人用它画整幅画——见 http://www.cssplay.co.uk/menu/fivestar和同一站点上的其他 hack——但正如我所说，我不建议实际这样做，除非只是为了演示像这个人这样的 hack。

希望对您有所帮助。

[编辑]根据 OP 的评论，他只想在更大的矩形上添加一个矩形突出部分 <div> ，所以事实上他试图创造的形状毕竟不是那么复杂；事实上，它听起来很像一个标签。鉴于此，迄今为止最好的建议是忘记使用 SVG 绘制它，而简单地创建两个 div:一个用于主要内容，一个用于选项卡。如有必要，可以创建第三个 div 来包裹其他两个。这可能有助于通过 CSS 或 Javascript 将另外两个引用在一起。