Html 布局的CSS与SVG
我正在开发一个具有特定布局的web应用程序。Html 布局的CSS与SVG,html,css,layout,svg,Html,Css,Layout,Svg,我正在开发一个具有特定布局的web应用程序。 我主要使用CSS设置按钮样式，使用div设置其他布局项目的样式。 问题是，有时我需要一个非矩形的布局项。 此外，设计SVG更容易，有时可能会产生更好的结果。 我的问题是：我应该在布局中始终使用CSS，例如，组合div以实现非矩形效果，还是应该在一些布局项中使用SVG？ 还有-按钮如何-CSS或SVG？ 谢谢 我倾向于建议您不要在布局中使用SVG，这并不是它真正的目的。它最适合用于图表、象形图、图表或地图等 使用SVG将有以下缺点： -首先，支持：IE
我主要使用CSS设置按钮样式，使用div设置其他布局项目的样式。
问题是，有时我需要一个非矩形的布局项。
此外，设计SVG更容易，有时可能会产生更好的结果。
我的问题是：我应该在布局中始终使用CSS，例如，组合div以实现非矩形效果，还是应该在一些布局项中使用SVG？
还有-按钮如何-CSS或SVG？
谢谢 我倾向于建议您不要在布局中使用SVG，这并不是它真正的目的。它最适合用于图表、象形图、图表或地图等 使用SVG将有以下缺点：
-首先，支持：IE请记住，SVG在旧浏览器中不受支持。特别是在IE8和更早版本中。因此，使用SVG将限制您的受众 可以装配旧版本的IE来支持SVG——有许多Javascript库可以将SVG转换为VML，VML是微软专有的SVG替代品。然而，这确实意味着您不必要地运行Javascript代码；您可能会在IE中导致性能问题，或者更糟糕的是，它的加载速度可能足够慢，以至于在加载布局后会重新绘制布局 因此，出于跨浏览器兼容性的原因，我建议不要在基本页面布局中使用SVG 我将SVG用于图形和图表等。对于这些，我将使用javascript库，这使得绘制SVG非常简单，并且在IE中将其呈现为VML，而无需进行任何显式转换 对于在CSS中创建非方形元素，有一种使用CSS边框绘制三角形和其他形状的方法。这适用于所有浏览器（IE6中有一些小警告），因此非常适合创建标记箭头和语音气泡等斑点效果 有关此操作的更多信息，请参阅 对于斑点效果很好，但应该强调的是，我不推荐它用于复杂的形状；我曾看到一些人用它画了整张图——在同一个网站上看到和其他黑客——但正如我所说，我不建议真的这样做，只是为了演示一个像这家伙一样的黑客 希望有帮助 [编辑]
根据OP的评论，他只想在一个较大的矩形上添加一个矩形突出部分，所以实际上他试图创建的形状毕竟并不复杂；事实上，这听起来很像一张账单。考虑到这一点，到目前为止最好的建议是忘记使用SVG绘制它，只需创建两个div：一个用于主要内容，一个用于选项卡。如有必要，可以创建第三个div来包装其他两个div。这可能有助于通过CSS或Javascript同时引用其他两种浏览器。我们现在是2017年，我相信所有主流浏览器都支持SVG。
所以我认为SVG是一个不错的选择。您可能需要使用JavaScript来调整屏幕上的元素并使其具有响应性，因为SVG不提供flexbox、tables、float等功能。这样做的好处是您将具有更大的灵活性，并且不必处理CSS的限制和副作用。没有CSS与SVG之比，它们不在同一计划中：CSS样式HTML和SVG。你可能指的是HTML或SVGBiAiB：请再读一遍问题。这是有道理的。他们正在询问是否使用SVG来呈现一些页面元素，而CSS无法实现所需的样式。您说非矩形项是一个问题。你能详细说明一下吗？它们是否是与布局相关的问题？为什么？您是否考虑过使用svg设计一个具有视觉吸引力的按钮，然后使用css将其放置在页面上？谢谢。好的观点。但正如你所说，在CSS中创建非方形元素是一种“黑客行为”。边界不是为了这个。我想要一个正常的方式来做这些事情。这就是为什么我认为SVG是好的。@amitairos-这是一个选择：一个小技巧，但良好的浏览器兼容性，或者SVG，但不包括IE用户。我知道我会走哪条路。也许五年后，当最后一批IE8用户最终被迫升级时，就可以切换到SVG来实现这类功能了。它看起来仍然很复杂而且不“干净”。嵌入svg或使用svg的图像怎么样？@amitairos-请参阅我在另一个答案中对您的评论的回应。你在寻找一个“干净”的答案时把事情复杂化了；做你想做的事情最干净最简单的方法就是为突出的钻头再加一个