爲漸變選擇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

回答

相關問題