RE: How does the svg element handle CSS border and background-color?

Hello,

Kevin Ar18, note, that in SVG tiny 1.2 there are already the properties
viewport-fill and viewport-fill-opacity to define in some way the background
-colour and -opacity of the svg element.
Because it is related to the viewport, it fills the complete viewport and not
just the area defined by width, height, viewBox and preserveAspectRatio.
Therefore at least for this version of SVG (without the requirement to
interprete CSS at all) no need to worry about a CSS background.
To get a border or for other versions something similar to a background,
one can always add a rectangle with the size and position of the viewBox 
area or for a background something much larger than the viewBox area.

With this the background and border is defined within the SVG document
or fragment, what is typically useful, if a defined background is required at
all.

And because it is clearly defined in the SVG recommendation, which 
properties apply to which elements there should be no problem left -
as for example in CSS for width and height for inline elements.
XHTML or HTML(5), I think, is in CSS mainly a difference for the 
background of the html and body element. Because SVG fortunately
has no such (viewer related) historical problems, this case does not appear.

If I need border and background for an SVG fragment within an
(X)HTML fragment, I simply put a div (or a semantically more relevant element)
around the SVG to get what I want.


Olaf

Received on Friday, 20 August 2010 08:58:41 UTC