RE: SVG in a HTML:table

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 02:59:49 UTC