CSS3 그라데이션을 SVG로

내 페이지에서 CSS3 그라디언트를 많이 사용하고 있습니다. IE와 Opera에 대한 SVG 폴백을 제공하고 싶습니다.CSS3 그라데이션을 SVG로

CSS3 선형 그래디언트에 대한 SVG 폴백을 만드는 것은 매우 쉽습니다. 이 CSS에 해당

<svg xmlns="http://www.w3.org/2000/svg"> 
    <linearGradient id="g" gradientTransform="rotate(90,.5,.5)"> 
     <stop stop-color="black" offset="0"/> 
     <stop stop-color="white" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/> 
    </svg>

: 나는 다음과 같은 코드를 사용이 방사형 그라디언트 CSS3에 관해서 지금

background:-webkit-linear-gradient(black,white); 
    background: -moz-linear-gradient(black,white); 
    background:  -o-linear-gradient(black,white); 
    background:  linear-gradient(black,white);

을, 일이 좀 더 복잡지고있다. 이 가지고 올 지금까지 내가 관리했습니다

background:-webkit-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%); 
    background: -moz-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%); 
    background:  -o-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%); 
    background:  radial-gradient(circle at 50% 10%,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);

: 나는 다음과 같은 CSS3의 방사형 그라데이션의 SVG 동등한를 작성 운이없는거야

<svg xmlns="http://www.w3.org/2000/svg"> 
    <radialGradient id="g"> 
    <stop stop-opacity=".3" stop-color="white" offset=".1"/> 
    <stop stop-opacity="0" stop-color="white" offset=".9"/> 
    </radialGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/> 
</svg>

을하지만 제공 나 다른 결과.

어떻게 CSS3에서 원래의 것과 동일한 그래디언트를 생성 할 수 있습니까? http://jsfiddle.net/QuMnA/ 당신은 당신 방사형 그래디언트의 cx 및 cy 속성을 지정해야합니다

출처

2012-09-06 Kuwiuwuw Kurwiow

...

<svg xmlns="http://www.w3.org/2000/svg"> 
    <radialGradient id="g" r="1" cx="50%" cy="10%"> 
    <stop stop-opacity=".3" stop-color="white" offset=".1"/> 
    <stop stop-opacity="0" stop-color="white" offset=".9"/> 
    </radialGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/> 
</svg>

출처

2012-09-06 18:02:08 Duopixel

글쎄, 난 그것을 시도했다 :

여기에 두 그라디언트의 데모입니다. 결과를보십시오 : http://jsfiddle.net/vvXgb/. 그것은 원본에 더 가깝지만 그래야만하는 것은 아닙니다. –

당신이 만족스러운 결과를 얻을 때까지 radialGradient 태그에서'r' 속성으로 놀아보고, 업데이트 된 코드를 확인하십시오. – Duopixel

최신 브라우저는 SVG 배경을 지원하므로 base64로 인코딩하면 CSS3 대체가 필요하지 않습니다. – Duopixel

CSS3 그라데이션을 SVG로

답변

관련 문제