CSS3 geçişleri SVG olarak

Sayfamda çok fazla CSS3 gradyan kullanıyorum. IE ve Opera için SVG yedeği sağlamak istiyorum.CSS3 geçişleri SVG olarak

CSS3 doğrusal gradyan için SVG yedekleri oluşturmak oldukça kolaydır. Bu css eşdeğerdir

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

: Aşağıdaki kodu kullanın bu radyal geçişlerini CSS3 gelir Şimdi

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

, işler biraz daha karmaşık alıyorsanız. Bu ile gelip Şimdiye kadar ben başardınız

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%);

: Ben aşağıdaki gibi bir CSS3 radyal degrade için SVG eşdeğer oluşturarak hiç şans yaşıyorum

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

Ama verir farklı sonuçlar.

CSS3'teki orijinal ile aynı gradyanı nasıl üretebilirim? http://jsfiddle.net/QuMnA/ Sen radyal degrade cx ve cy özelliklerini belirtmek gerekir

kaynak

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>

kaynak

2012-09-06 18:02:08 Duopixel

Pekiyi, bunu denedim:

İşte iki degradelerin bir demo. Sonuçlara bakın: http://jsfiddle.net/vvXgb/. Orijinaline daha yakın ama yine de olması gerektiği gibi değil. Tatmin edici bir sonuç elde edinceye kadar –

radyalGridient etiketinizde 'r' özelliği ile oynayın, güncellenmiş kodu kontrol edin. – Duopixel

Modern tarayıcılar bu arada SVG arka planını destekler, böylece base64 ile kodlarsanız CSS3 geri dönüşüne gerek yoktur. – Duopixel

CSS3 geçişleri SVG olarak

cevap

İlgili konular