एसवीजी

Question

के रूप में CSS3 ग्रेडियेंट्स मेरे पृष्ठ पर मैं बहुत सारे CSS3 ग्रेडियेंट का उपयोग कर रहा हूं। मैं आईई और ओपेरा के लिए कुछ एसवीजी फॉलबैक प्रदान करना चाहता हूं।

CSS3 रैखिक-ढाल के लिए एसवीजी फ़ॉलबैक बनाना बहुत आसान है।

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

कौन इस सीएसएस के बराबर है: मैं निम्नलिखित कोड का उपयोग

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

अब जब यह रेडियल-ढ़ाल CSS3 के आता है, चीजों को थोड़ा और अधिक जटिल हो रही है। इस साथ आने के लिए

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

Answer 1

आप रेडियल ग्रेडिएंट के cx और cy गुण निर्दिष्ट करने की आवश्यकता ...

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