Re: SVG in a HTML:table

Thank you, Simon!  That does work as expected in Opera 9.
Unfortunately, Mozilla still interprets height="100%" as being the
entire height of the client area of the browser.  Let's hope for a fix
in Fx3...

Jeff

On 1/2/07, Simon Pieters <zcorpan@hotmail.com> wrote:
> Hi,
>
> From: "Jeff Schiller" <codedread@gmail.com>
> >I have a question about XHTML+SVG when it comes to laying out SVG in a
> >HTML:table.  Here's my minimal test case.  I'm also going to point
> >this question at the svg-developers list too:
> >
> ><?xml version="1.0" encoding="UTF-8"?>
> ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
> >"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
> ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
> >  <style type="text/css">* { border-style:solid }</style>
> >  <body>
> >  <table border="1">
> >    <tr>
> >      <td>
> >        <p>Paragraph One</p>
> >        <p>Paragraph Two</p>
> >        <p>Paragraph Three</p>
> >        <p>Paragraph Four</p>
> >        <p>Paragraph Five</p>
> >        <p>Paragraph Six</p>
> >        <p>Paragraph Seven</p>
> >      </td>
> >      <td>
> >        <svg version="1.1" width="40px" height="100%"
> >xmlns="http://www.w3.org/2000/svg" >
> >          <rect x="0" y="0" width="100%" height="100%" fill="red" />
> >        </svg>
> >      </td>
> >    </tr>
> >  </table>
> ></body>
> ></html>
>
> Let's compare with how <html:img> works.
>
>    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
>     <style type="text/css">* { border-style:solid }</style>
>     <body>
>      <table border="1">
>        <tr>
>         <td>
>          <p>Paragraph One</p>
>          <p>Paragraph Two</p>
>          <p>Paragraph Three</p>
>          <p>Paragraph Four</p>
>          <p>Paragraph Five</p>
>          <p>Paragraph Six</p>
>          <p>Paragraph Seven</p>
>         </td>
>         <td>
>          <img src="http://www.w3.org/Icons/w3c_main" width="40"
> height="100%"/>
>         </td>
>        </tr>
>      </table>
>     </body>
>    </html>
>
> With CSS rules (unless I'm mistaken), the height of the image is auto
> because the height of the parent element is auto. In order to make the image
> 100% of the cell we need to specify 100% height of the cell and the row as
> well:
>
>    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
>     <style type="text/css">* { border-style:solid }</style>
>     <body>
>      <table border="1">
>        <tr style="height:100%">
>         <td>
>          <p>Paragraph One</p>
>          <p>Paragraph Two</p>
>          <p>Paragraph Three</p>
>          <p>Paragraph Four</p>
>          <p>Paragraph Five</p>
>          <p>Paragraph Six</p>
>          <p>Paragraph Seven</p>
>         </td>
>         <td style="height:100%">
>          <img src="http://www.w3.org/Icons/w3c_main" width="40"
> height="100%"/>
>         </td>
>        </tr>
>      </table>
>     </body>
>    </html>
>
> I would expect inline SVG images to work the same way.
>
> Regards,
> Simon Pieters
>
> _________________________________________________________________
> Prenumerera på senaste musiken http://www.msn.se/music/
>
>

Received on Wednesday, 3 January 2007 03:20:44 UTC