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


Those properties are not applicable to SVG elements.  See the list of CSS
properties that can be applied to SVG elements here:

Jeff Schiller

On Wed, Aug 18, 2010 at 10:53 AM, Kevin Ar18 <> wrote:

>  I was going to submit a possible clarification for how embedding SVG in
> HTML should work (based on the specs and clarifying some vague areas).
> However, I am confused and concerned about one issue:  what if you set a
> border, background-color, or some other CSS property that adds something
> visual to the svg tag?
> Assume an html document like the following
> html
>   body
>     svg
> Assume we, specify (in CSS) that the svg tag has a background-color,
> border, or some other CSS property that adds something visual.
> Problem:
> According to my understanding of the SVG specs, the svg tag is
> non-graphical and should not render anything onscreen.  It can affect the
> flow of the html document, but does not show up visually (like a div with
> visibility=none).  This also means events cannot "dispatch" from said
> invisible svg element.
> Anyways, it all makes sense, until you add things like background-color,
> border, or some other graphical property.  The svg element suddenly turns
> into a weird hybrid graphical element (when it is supposed to be
> non-graphical).  This unusual situations raises questions like: Should the
> svg element now be allowed to "dispatch" events, despite what the SVG spec
> says?  Should the svg element now block access to items underneath (act like
> an invisible or visible layer)?
> Is there anywhere in the specs that addresses this issue?
> ...Or is this a very special case that only applies to embedding the svg
> tag in an html5 document... meaning maybe this needs to be addressed from
> the perspective of the HTML5 spec?
> Kevin

Received on Wednesday, 18 August 2010 21:12:40 UTC