W3C home > Mailing lists > Public > www-svg@w3.org > April 2003

[SVG] grid based layout DTD suggestion

From: Fred P. <fprog26@hotmail.com>
Date: Wed, 30 Apr 2003 05:02:48 -0400
To: www-svg@w3.org
Message-ID: <BAY2-F138Vilvg8UUxR00004630@hotmail.com>

<?xml version='1.0' encoding='iso-8859-1'?>
<!-- FILE: svg-grid4.xml -->
<!DOCTYPE svg [

<!ELEMENT svg    (#PCDATA|defs|grid)* >

<!-- SVG Faking it -->
<!ELEMENT defs   (#PCDATA|grid)*      >
<!ELEMENT use    (#PCDATA)>
<!ELEMENT g      (#PCDATA)>
<!ELEMENT text   (#PCDATA)>
<!ELEMENT rect   (#PCDATA)>
<!ELEMENT circle (#PCDATA)>
<!ELEMENT xlink  (#PCDATA)>

<!-- Minimum requirement everything else would be CSS oriented -->
<!ELEMENT grid  (grid-row*)   >
<!ATTLIST grid
  x             CDATA   "0"
  y             CDATA   "0"
  id            CDATA   #IMPLIED
  height        CDATA   #IMPLIED
  width         CDATA   #IMPLIED
  style         CDATA   #IMPLIED
  class         CDATA   #IMPLIED
  shape        (xlink)  #IMPLIED
  onclick       CDATA   #IMPLIED
  ondblclick    CDATA   #IMPLIED
  onmousedown   CDATA   #IMPLIED
  onmouseup     CDATA   #IMPLIED
  onmouseover   CDATA   #IMPLIED
  onmousemove   CDATA   #IMPLIED
  onmouseout    CDATA   #IMPLIED
  onkeypress    CDATA   #IMPLIED
  onkeydown     CDATA   #IMPLIED
  onkeyup       CDATA   #IMPLIED
>
<!ELEMENT grid-row  (grid-col*)   >
<!ATTLIST grid-row
  height        CDATA   #IMPLIED
  style         CDATA   #IMPLIED
  class         CDATA   #IMPLIED
  rowspan       CDATA   "1"
  shape        (xlink)  #IMPLIED
  onclick       CDATA   #IMPLIED
  ondblclick    CDATA   #IMPLIED
  onmousedown   CDATA   #IMPLIED
  onmouseup     CDATA   #IMPLIED
  onmouseover   CDATA   #IMPLIED
  onmousemove   CDATA   #IMPLIED
  onmouseout    CDATA   #IMPLIED
  onkeypress    CDATA   #IMPLIED
  onkeydown     CDATA   #IMPLIED
  onkeyup       CDATA   #IMPLIED
>
<!ELEMENT grid-col  (#PCDATA|use|g|text|rect|circle|grid)*      >
<!ATTLIST grid-col
  width         CDATA   #IMPLIED
  style         CDATA   #IMPLIED
  class         CDATA   #IMPLIED
  colspan       CDATA   "1"
  shape        (xlink)  #IMPLIED
  onclick       CDATA   #IMPLIED
  ondblclick    CDATA   #IMPLIED
  onmousedown   CDATA   #IMPLIED
  onmouseup     CDATA   #IMPLIED
  onmouseover   CDATA   #IMPLIED
  onmousemove   CDATA   #IMPLIED
  onmouseout    CDATA   #IMPLIED
  onkeypress    CDATA   #IMPLIED
  onkeydown     CDATA   #IMPLIED
  onkeyup       CDATA   #IMPLIED
>

]>

<!-- Example -->

<svg
   xmlns:xlink='http://www.w3.org/2000/xlink/namespace/'
   width='300'
   height='300'
>
<defs>
  <!-- ================================================= -->
  <g id='cat'>
    <image xlink:href='cat.png'/>
  </g>
  <!-- ================================================= -->
  <g id='mat'>
    <image xlink:href='mat.png'/>
  </g>
  <!-- ================================================= -->
  <g id='dog'>
    <image xlink:href='dog.png'/>
  </g>
  <!-- ================================================= -->
  <g id='fish'>
    <image xlink:href='fish.png'/>
  </g>
  <!-- ================================================= -->
  <g id="CatMatGrid">
    <grid>
      <grid-row>
        <!-- The (x,y) coordinates are offset to the table (0,0) top-left 
corner
             if ( x < 0 ) x = 0;
             if ( y < 0 ) y = 0;
        -->
        <grid-col>
          <text style='font:arial; font-size:48pt; text-rendering:normal;'
            x='10' y='10'>Cat</text>
        </grid-col>
        <grid-col>
          <text style='font:arial; font-size:48pt; text-rendering:normal;'
            x='10' y='10'>Mat</text>
        </grid-col>
      </grid-row>
      <grid-row>
        <grid-col>
          <use xlink:href='#cat' x='10' y='10'/>
        </grid-col>
        <grid-col>
          <use xlink:href='#mat' x='10' y='10'/>
        </grid-col>
      </grid-row>
    </grid>
  </g>
  <!-- ================================================= -->
  <g id="CatMatGrid2">
    <!-- The entire rectangular grid is morphed to fit into the cat picture 
-->
    <grid shape='url(#cat)' style='cellspacing: 10; cellpadding: 10; border: 
2;'>

      <!-- This particular grid-row has the external cell-padding that looks 
like the shape of a dog -->
      <grid-row shape='url(#dog)'>
        <!-- The (x,y) coordinates are offset to the table (0,0) top-left 
corner
             if ( x < 0 ) x = 0;
             if ( y < 0 ) y = 0;
        -->

        <!-- This particular cell has the external cell-padding that looks 
like the shape of a fish -->
        <grid-col shape='url(#fish)'>
          <text style='font:arial; font-size:48pt; text-rendering:normal;'
            x='10' y='10'>Cat</text>
        </grid-col>
        <grid-col>
          <text style='font:arial; font-size:48pt; text-rendering:normal;'
            x='10' y='10'>Mat</text>
        </grid-col>
      </grid-row>
      <grid-row>
        <grid-col>
          <use xlink:href='#cat' x='10' y='10'/>
        </grid-col>
        <grid-col>
          <use xlink:href='#mat' x='10' y='10'/>
        </grid-col>
      </grid-row>
    </grid>
  </g>

  <!-- ================================================= -->
  <g id="OverlapGrid">
    <grid>
      <grid-row>
        <grid-col>

            <grid x='10' y='10'>
              <grid-row>
                <grid-col>
                  <text style='font:arial; font-size:48pt; 
text-rendering:normal;'
                    x='10' y='10'>Cat</text>
                </grid-col>
                <grid-col>
                  <text style='font:arial; font-size:48pt; 
text-rendering:normal;'
                    x='30' y='10'>Mat</text>
                </grid-col>
              </grid-row>
            </grid>

            <grid x='10' y='10'>
              <grid-row>
                <grid-col>
                  <text style='font:arial; font-size:48pt; 
text-rendering:normal;'
                    x='10' y='10'>This text is overlapping by 
superposition</text>
                </grid-col>
              </grid-row>
            </grid>

        </grid-col>
      </grid-row>
    </grid>
  </g>

</defs>

<!--
  Draw a grid containing 2x2 cells span automatically to fit each picture
  with the text on top and the image under it
-->
<use xlink:href='#CatMatGrid' x='10' y='10'/>

<!--
  Draw a grid containing 2x2 cells span automatically to fit each picture
  with the text on top and the image under it

  where the entire grid is shaped like the cat picture
  the first row is shape like a dog
  and the first cell is shaped like a fish

  Therefore the word 'cat' is fitted and morphed to fit inside a fish
  where the fish is morphed to fit within a dog shape and the entire thing 
is morph into a cat.

  Sorry, no ASCII art yet! =P

-->
<use xlink:href='#CatMatGrid2' x='10' y='200'/>

</svg>


<!--

Ideas, comments, critics and suggestions are welcome !

Sincerely yours,
Fred.

-->



_________________________________________________________________
Add photos to your e-mail with MSN 8. Get 2 months FREE*.  
http://join.msn.com/?page=features/featuredemail
Received on Wednesday, 30 April 2003 05:02:55 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:24 GMT