Missing SVG fill attributes cause viewing bugs?

[Jan van Gemert]

Hi,

I've been fiddling a bit with the protovis generated SVG.

It seems the SVG has a <rect> at the end for the panel's stroke
style,
which is the size of the root panel but without a specified fill.
This
lack of a fill seems to give some different results depending on which
viewer you use.
In some viewers the fill is interpreted as "none" but in other viewers
the missing fill is
interpreted as "black", leaving the image with a big black square over
the root panel.

For example, consider this simple bit of protovis code:

// root panel,
var vis = new pv.Panel()
.width(100)
.height(100)
.margin(50)
.strokeStyle("#ccc")
.fillStyle("#fff");

vis.add(pv.Dot)
.data([50] )
.left( function (d) {return d;})
.top( function (d) {return d;})

vis.render();

this gives the following SVG (by using vis.scene[0].canvas.innerHTML;
in firefox ):

<svg height="200" width="200" stroke-width="1.5" stroke="none"
fill="none" font-family="sans-serif" font-size="10px">
<rect fill="rgb(255,255,255)" height="100" width="100" y="50" x="50">
</rect>
<g transform="translate(50, 50)">
<circle r="4.47213595499958" cy="50" cx="50"
stroke="rgb(31,119,180)"></circle>
</g>
<rect stroke="rgb(204,204,204)" height="100" width="100" y="50"
x="50">
</rect>
</svg>

Note the final rect and the circle have a stroke style but no fill.
Now, if i save this to a .svg file, and then try to view the image in
eog, f-spot, or gimp they all give a black square.
If, however, i view the file with Firefox, OpenOffice or Inkscape the
image
displays correctly.

Yet, if i manually add fill="none" to this last <rect> in the svg
then the rectangle displays correct in all viewers.

Does anybody know if this is a viewer-bug? Or a specification-hole?
and.. any suggestions on what to do about it?
The only solution i see now is to parse the svg myself, and add a
fill="none"
if no fill is given.

Thanks!

Jan

[Jan van Gemert]

In case anybody is interested, below is a "Fill-the-missing-Fills"
solution, however there may be some other ways to solve this?

Jan


function correctMissingFill(xmlNodeList)
{
for (var i=0;i<xmlNodeList.length;i++)
{
if( xmlNodeList[i].nodeType == 1)
{
// correct (rectangles, and others that have stroke)
but no fill
if( ( xmlNodeList[i].nodeName == "rect" ||
xmlNodeList[i].hasAttribute("stroke") ) && !
xmlNodeList[i].hasAttribute("fill") )
{
xmlNodeList[i].setAttribute("fill", "none");
}
correctMissingFill( xmlNodeList[i].childNodes );
}
}
}

var svgString = vis.scene[0].canvas.innerHTML;
parser=new DOMParser();
xmlDoc=parser.parseFromString(svgString,"text/xml");
correctMissingFill(xmlDoc.childNodes);
var serializer = new XMLSerializer();
svgString = serializer.serializeToString(xmlDoc);