Gecko:SVGLayout

From MozillaWiki
Revision as of 12:38, 1 June 2005 by Roc (talk | contribs)
Jump to navigation Jump to search

SVG layout is a bit weak. Here are some use cases that don't work with existing standards or our implementation:

  • Wrap an SVG container around an auto-height HTML element (e.g., to rotate it, or to apply a filter).

I think there's just no way to do this right now. SVG does not support inside-out sizing.

  • XUL + SVG? Not sure what the typical use case is here.

Some suggestions:

  • Treat <svg> as a replaced element (default inline). (I think we're already doing this?) Change the SVG spec for compound SVG documents so that if the "width" or "height" attributes are missing, instead of using "100%" (whatever that means) as the intrinsic width or height, we use the bottom or right edge of the rectangle that encloses the element's contents' overflow area as the intrinsic size reported to outer layout, and set the width/height as used by contained elements to zero.
  • Make the "width" and "height" attributes optional on foreignObject. We'll compute an intrinsic width or height from the enclosed content and use that.

Actually I think this is enough to solve my SVG container problem. Then I can just write

<p>Hello
<svg style="display:block;" width="100%" xmlns="...">
  <foreignObject transform="translate(50%,0) rotate(90)">
     <div xmlns="...">Hello</div>
  </foreignObject>
</svg>
<p>Kitty

The outer SVG element will grow in height to include the bottom edge of the foreignobject. It would look something like this:

   Hello
           H
           e
           l
           l
           o
   Kitty

(The glyphs in the vertical Hello would be rotated by 90 degrees.)