Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

SVG Radial Gradient vindt Webkit niet aardig ...

Pagina: 1
Acties:

  • Huismus
  • Registratie: Augustus 2009
  • Laatst online: 14-11 22:19
Hallo Tweakers!

Ik ben redelijk nieuw in de wereld van [handwritten] SVG, maar iedereen moet een keer beginnen :).
Ik heb het volgende document gemaakt: https://dl.dropboxusercon...weakers/svg_origineel.svg

Dit is de XML:
XML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="basic" id="svg_docu" width="100%" height="540">
        <devs>
           <radialGradient  cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="gradient_svgbg" gradientUnits="userSpaceOnUse">
            <stop
                style="stop-color:black;stop-opacity:1;"
                offset="0"
                id="stopi1" />
            <stop
                style="stop-color:white;stop-opacity:1;"
                offset="1"
                id="stopi2" />
        </radialGradient>
        </devs>
    <circle style="fill: url(#gradient_svgbg);" id="backgroundCircle2" cx="50%" cy="50%" r="270"></circle>
    <rect style="fill: url(#gradient_svgbg);" id="backgroundRect2" x="0" y="180" width="100%" height="150"></rect>
</svg>


Zoals meteen al te zien is voor degenen die een Webkit*-browser (bijv. Chrome, Safari, Maxthon of Epiphany) gebruiken: het object is helemaal zwart!

In Firefox (Gecko), Opera (Presto) en zelfs in Inkscape of Gnome Image Viewer kan ik het gradient wél gewoon zien, en ziet het object eruit zoals het bedoelt is! Zelfs openen en vervolgens weer opslaan met Inkscape zorgt er niet voor dat Webkit het gradient weergeeft (al zorgt het er wel voor dat allemaal andere dingen veranderen :( - Inkscape moet het niet zo hebben van de percentages in SVG).

*Ik heb zelf alleen maar beschikking over Webkit/GTK+, het zou zomaar kunnen zijn dat het object wel goed rendert op Windows of Mac OSX...

Ik ben hier al uren mee bezig en ik kom er maar niet uit :(. Ik denk dat ik zelf ergens een fout gemaakt heb... maar waar. Chrome heeft nog nooit problemen gehad met het weergeven van SVG...

Als iemand weet wat ik fout doe, do tell! :D
Alvast bedankt,

Huismus

  • Spinal
  • Registratie: Februari 2001
  • Laatst online: 18-11 15:23
code:
1
<devs>
moet
code:
1
<defs>
zijn ;)
Als je dat verandert werkt het hier (Chrome 26, Windows 8 ) zoals het ook in Opera (12.15) werkt.

Full-stack webdeveloper in Groningen


  • Huismus
  • Registratie: Augustus 2009
  • Laatst online: 14-11 22:19
Oh My God!

Wat stom :O

Bedankt Spinal :)