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

My interpretation: putting it inside a HTML5 document is no different than
putting it inside a XHTML document which is no different than referencing it
in a <object> and having all documents reference the same CSS
file:  applying a border CSS property to any SVG element has no visual
effect.

<div style='border: 1px solid green'>
  <svg style='border: 1px dashed red'>
    ...
  </svg>
</div>

The div will only have a green solid border.  No red should be visible.
 This has the same visual effect as:

  <object style='border: 1px solid green' data='foo.svg'/>

I guess I'm not understanding your confusion.

Also, this is a SVG-CSS issue (with behavior already clearly specified in
the link I provided).  It has nothing to do with HTML5 as far as I can tell.

Regards,
Jeff Schiller


On Wed, Aug 18, 2010 at 2:34 PM, Kevin Ar18 <kevinar18@hotmail.com> wrote:

>  Those properties are not applicable to SVG elements. See the list of CSS
> properties that can be applied to SVG elements here:
> http://www.w3.org/TR/2010/WD-SVG11-20100622/styling.html#SVGStylingProperties
>
>
> That is what I thought.  However, the problem area is putting the svg tag
> inside an html5 document.  You can then apply background-color, borders,
> etc....
> Several questions:
> * Should the HTML5 spec forbid applying non-svg properties to the
> svg element when embedded in an html5 document?  (I'm not sure if this would
> work though)
>
> * Should the CSS properties be allowed, but with special conditions?
>

Received on Wednesday, 18 August 2010 21:59:10 UTC