为渐变选择SVG或CSS3

我想在我正在处理的新网站中大量使用渐变。我一直在想，如果在CSS3或SVG中实现渐变效果会更好。为渐变选择SVG或CSS3

通常我只需要多次停止线性渐变，因此都能满足我的需求。

我最初认为这是最好的CSS3，但开始质疑我的决定，并希望其他意见。

我的想法迄今是SVG（作为CSS背景）可能会更好，因为：

它工作在IE9
我的CSS是清洁的W/O浏览器前缀
易梯度

CSS3的重用可能更好，因为：

似乎是CSS
少下载一个工作为客户
一切都在一个地方

，我不知道答案是执行较好的一个重要的考虑？

是否有实施背景渐变的最佳做法？

来源

2012-02-12 C.J.

据利·贝罗进行测试（我相信她的工作），CSS梯度更快： http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

UPDATE：

你也可以考虑使用Modernizr的服务了SVG到我E9支持SVG背景，但不支持CSS渐变。

在你的CSS你只需要做：

.cssgradients #someElement { /* Gradient background rule. */ } 
.no-cssgradients #someElement { /* SVG background rule. */ }

此处了解详情：

http://modernizr.com

来源

2012-02-12 09:15:39

不要让你的设计选择基于使IE快乐。使用渐进式增强/分级浏览器支持，并将IE推到支持列表的底部。

选择CSS3：您的网站只会在IE上显示没有渐变，这可能是一个可以接受的折衷方案。

来源

2012-02-12 09:03:43

您应该使用http://www.colorzilla.com/gradient-editor/来生成CSS和SVG（用于IE9）。

实施例：

background: #fefcea; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmNlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWRhMzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */ 
background: linear-gradient(top, #fefcea 0%,#f1da36 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0); /* IE6-8 */

它自动生成IE9 SVG代码与IE9（使用SVG）

支持完整的多停止梯度。添加 “梯度”类所有的元素有一个梯度，并添加以下重写你的HTML完成IE9支持：

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]-->

来源

2012-02-12 09:04:34

这并不真正回答OP所问的问题。能够以最少的代码支持这两者，真是太好了，但是OP要求优点和缺点。这个答案的唯一方法是有意义的，如果它的前缀是_“这两个梯度在各方面都完全相同;不同的浏览器只支持不同的渐变类型“_，这不是一个事实陈述。 – 2014-10-29 23:00:40

我选择来实现我的线性渐变的SVG我可以一次做到这一点，我当然，我只支持现代浏览器。

这是SVG，我只需要描述一次。我不确定是否有方法使用css定义x1y1和x2 y2坐标。高兴地被证明是错误的。

所以，如果CSS不能实现与x1y1 x2y2坐标的梯度我想这是使用svg线性梯度的优势。

下面的代码可以直接输出inkscape。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 200 200"> 

    <defs> 
     <linearGradient id="grad1" x1="26.3" y1="0.2" x2="26.5" y2="3.9" gradientUnits="userSpaceOnUse"> 
     <stop offset="0" style="stop-color:#0284a4;stop-opacity:0.9" /> 
     <stop offset="1" style="stop-color:#0284a5;stop-opacity:1" /> 
     </linearGradient> 
    </defs> 
    <path id="skylevel10" fill="url(#grad1)" d="m 0 -0 201 0 0 6.7 c 0 0 -29.8 1.2 Z"/> 
</svg>

来源

2014-11-17 19:56:19

为渐变选择SVG或CSS3

回答

相关问题