Dane-URI Tło SVG w CSS nie działa w Firefoksie

Ok, więc oto co próbuję zrobić. Mam ten kod w pliku cssDane-URI Tło SVG w CSS nie działa w Firefoksie

.form_row .textfield:hover, .textfield_m:hover 
{ 
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCI+DQogIDxkZWZzPg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibXlMaW5lYXJHcmFkaWVudDEiDQogICAgICAgICAgICAgICAgICAgIHgxPSIwJSIgeTE9IjAlIg0KICAgICAgICAgICAgICAgICAgICB4Mj0iMCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCUiICAgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmY1ZjciIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogIDwvZGVmcz4NCg0KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIg0KICAgICBmaWxsPSJ1cmwoI215TGluZWFyR3JhZGllbnQxKSIgLz4NCjwvc3ZnPg==); 
    background-repeat:repeat; 
    background-color:White ; 
    background-clip: border-box; -moz-background-clip: border; -webkit-background-clip: border-box; 
    background-origin: border-box; -moz-background-origin: border; -webkit-background-origin: border-box; 
    -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; background-size: 100% 100%; 
    animation: pulse .75s ease-in-out 0s infinite alternate; 
    -moz-animation:pulse .75s ease-in-out 0s infinite alternate; /*Firefox*/ 
    -webkit-animation:pulse .75s ease-in-out 0s infinite alternate; /*Safari and Chrome*/ 
    -o-animation:pulse .75s ease-in-out 0s infinite alternate; /*Safari and Chrome*/ 
}

Jest on wprowadzany tekstowo.
W każdej przeglądarce wydaje się działać dobrze, ale Firefox 5 nie działa. Wszystko, co dostaję, to czerń.
Można spojrzeć na to, co widzę tutaj http://www.skylabsonline.com/holy/
Zauważ, że we wszystkich innych głównych przeglądarek wyświetla w porządku, ale w firefox 5 to całkowicie zawodzi.
Jakieś pomysły?

RÓWNIEŻ, oto kod SVG do Base64 powyżej, a ja tę stronę, aby to http://webcodertools.com/imagetobase64converter konwertować, ale zawsze jest base64 base64.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> 
    <defs> 
    <linearGradient id="myLinearGradient1" 
        x1="0%" y1="0%" 
        x2="0%" y2="100%" 
        gradientUnits="userSpaceOnUse"> 
     <stop offset="0%" stop-color="#feffff" stop-opacity="1"/> 
     <stop offset="100%" stop-color="#d2ebf9" stop-opacity="1"/> 
    </linearGradient> 
    </defs> 

    <rect x="0" y="0" width="1" height="1" 
    fill="url(#myLinearGradient1)" /> 
</svg>

Źródło

2011-08-19 Kelly Elton

Dlaczego używacie SVG zamiast CSS gradientu? – MatTheCat

Przenośność/kompatybilność wsteczna –

FWIW, wygląda na to, że wygląda poprawnie w Firefoksie 6.0 – Phrogz

Firefox miał błąd, który został ustalony w FF6. A hash(#) in the Data URI source przerwie obraz.

A # w treści musi być chroniony jako %23.

Referencje

Źródło

2012-03-23 06:31:03

Zrobiłem to dla mnie, działa to również dla niezaszyfrowanych plików SVG po prostu używając źródła svg jako '' 'url ('data: image/svg + xml; utf8, svassr

ten błąd jest nadal obecny w FF41 – albanx

Właśnie skończyło się wrzucić gradient ręcznie za pomocą CSS za pomocą czegoś podobnego -moz-gradientu liniowego()

Źródło

2011-08-23 13:26:19

Dane-URI Tło SVG w CSS nie działa w Firefoksie

Odpowiedz

Powiązane problemy