그라데이션을위한 SVG 또는 CSS3 선택하기

나는 작업중인 새로운 웹 사이트에서 그라디언트를 많이 사용하고 싶습니다. CSS3 또는 SVG에서 그래디언트를 구현하는 것이 더 나은지 궁금해 왔습니다.그라데이션을위한 SVG 또는 CSS3 선택하기

일반적으로 나는 다중 스톱 선형 그라디언트 만 필요로하므로 둘 다 내 필요를 충족시킵니다.

처음에는 이것이 CSS3에서 가장 잘 수행되었다고 가정했지만 내 결정에 의문을 갖기 시작했고 다른 의견에 감사 드렸습니다.

내 생각은 지금까지 있기 때문에 (CSS의 배경) SVG가 더 좋을 수 있다는 것이다 : 그것은 IE9에서 작동

브라우저가
쉬운 접두사하여 w/o
내 CSS 청소기입니다 구배

CSS3의 재사용 될 수 있기 때문에 더 :

,617 한 곳

내가 더 잘 수행하는 것입니다에 대한 답을 모르는 중요한 고려 사항에

클라이언트
모두를위한 CSS
적은 다운로드 작업처럼 보인다인가?

배경 그라디언트를 구현하는 것이 가장 좋습니다.

출처

2012-02-12 C.J.

: 그라데이션이 모든 요소에 "그라데이션"클래스를 추가하고, IE9 지원을 완료하기 위해 HTML에 다음 재정의를 추가) 그녀의 작품을 신뢰, CSS 그라디언트가 빠릅니다 : http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

UPDATE :

또한 SVG를 제공하기 위해 모더 나이저를 사용하여 고려할 수

I에 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

CSS와 SVG (IE9 용) 모두를 생성하려면 http://www.colorzilla.com/gradient-editor/을 사용해야합니다.

예 :

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를 사용하여) 전체 멀티 스톱 그라디언트

지원을 생성합니다. (I 레아 베루에 의해 수행 된 테스트에 따르면

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

출처

2012-02-12 09:04:34

이것은 OP가 요구하는 질문에 실제로 대답하지 않습니다. 최소한의 코드로 두 가지를 모두 지원할 수 있다는 점은 훌륭하지만 OP는 장단점을 요구하고 있습니다. 이 대답이 의미하는 유일한 방법은 접두사가 _ 인 경우입니다. "두 그라디언트는 모든면에서 완전히 동등합니다. 다른 브라우저는 사실적인 진술이 아닌 다른 그라데이션 유형 "_을 지원합니다. –

은 내가 한 번 할 수있는 SVG 내 선형 그라데이션을 구현하기 위해 선택한, I 물론 현대적인 브라우저 만 지원합니다.

이것은 SVG입니다. 한 번만 설명하면됩니다. CSS를 사용하여 x1y1 및 x2 y2 좌표를 정의하는 방법이 있는지 확실하지 않습니다. 잘못 입증되면 행복합니다.

CSS가 x1y1 x2y2 좌표의 그래디언트를 구현할 수 없다면 svg 선형 그래디언트를 사용하는 이점이있는 것 같습니다.

다음 코드는 곧바로 잉크 스케이프에서 가져올 수 있습니다.

<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 선택하기

답변

관련 문제