- From: Fred P. <fprog26@hotmail.com>
- Date: Wed, 30 Apr 2003 05:02:48 -0400
- To: www-svg@w3.org
<?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 UTC