- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 21 Jan 2012 01:00:29 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox/images
In directory hutz:/tmp/cvs-serv23998/images
Modified Files:
flex-align.svg
Log Message:
Tweaked the diagram's code.
Index: flex-align.svg
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/images/flex-align.svg,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- flex-align.svg 20 Jan 2012 23:51:20 -0000 1.1
+++ flex-align.svg 21 Jan 2012 01:00:27 -0000 1.2
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='508' height='372'>
+<svg xmlns="http://www.w3.org/2000/svg" width='508' height='377'>
<defs>
<pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
<rect x='0' y='0' width='10' height='10' fill='#eee' />
@@ -8,102 +8,71 @@
</pattern>
</defs>
<style>
+ svg { overflow:visible; }
.label { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
.bg { fill: url(#checker); }
.border { stroke: black; stroke-width: 2; fill: transparent; }
- g.one > rect { fill: #fcc; }
- g.two > rect { fill: #cfc; }
- g.three > rect { fill: #ccf; }
- g.four > rect { fill: #cff; }
+ .one { fill: #fcc; }
+ .two { fill: #cfc; }
+ .three { fill: #ccf; }
+ .four { fill: #cff; }
</style>
- <g transform="translate(2,2)">
- <rect class='bg' x='0' y='0' width='250' height='120' />
- <g class='one' transform="translate(0,0)">
- <rect width='50' height='90' />
- </g>
- <g class='two' transform="translate(50,0)">
- <rect width='40' height='60' />
- </g>
- <g class='three' transform="translate(90,0)">
- <rect width='100' height='90' />
- </g>
- <g class='four' transform="translate(190,0)">
- <rect width='60' height='120' />
- </g>
- <rect class='border' x='0' y='0' width='250' height='120' />
- <text class='label' x='125' y='68'>start</text>
- </g>
- <g transform="translate(256,2)">
- <rect class='bg' x='0' y='0' width='250' height='120' />
- <g class='one' transform="translate(0,30)">
- <rect width='50' height='90' />
- </g>
- <g class='two' transform="translate(50,60)">
- <rect width='40' height='60' />
- </g>
- <g class='three' transform="translate(90,30)">
- <rect width='100' height='90' />
- </g>
- <g class='four' transform="translate(190,0)">
- <rect width='60' height='120' />
- </g>
- <rect class='border' x='0' y='0' width='250' height='120' />
- <text class='label' x='125' y='68'>end</text>
- </g>
- <g transform="translate(2,126)">
- <rect class='bg' x='0' y='0' width='250' height='120' />
- <g class='one' transform="translate(0,15)">
- <rect width='50' height='90' />
- </g>
- <g class='two' transform="translate(50,30)">
- <rect width='40' height='60' />
- </g>
- <g class='three' transform="translate(90,15)">
- <rect width='100' height='90' />
- </g>
- <g class='four' transform="translate(190,0)">
- <rect width='60' height='120' />
- </g>
- <rect class='border' x='0' y='0' width='250' height='120' />
- <text class='label' x='125' y='68'>center</text>
- </g>
- <g transform="translate(256,126)">
- <rect class='bg' x='0' y='0' width='250' height='120' />
- <g class='one' transform="translate(0,0)">
- <rect width='50' height='120' />
- </g>
- <g class='two' transform="translate(50,0)">
- <rect width='40' height='120' />
- </g>
- <g class='three' transform="translate(90,0)">
- <rect width='100' height='120' />
- </g>
- <g class='four' transform="translate(190,0)">
- <rect width='60' height='120' />
- </g>
- <rect class='border' x='0' y='0' width='250' height='120' />
- <text class='label' x='125' y='68'>stretch</text>
- </g>
- <g transform="translate(2,250)">
- <rect class='bg' x='0' y='0' width='504' height='120' />
- <g class='one' transform="translate(0,5)">
- <rect width='101' height='100' />
+ <svg x='2' y='2' width='250' height='120'>
+ <rect class='bg' width='100%' height='100%' />
+ <rect class='one' x='0' y='0' width='20%' height='75%' />
+ <rect class='two' x='20%' y='0' width='16%' height='50%' />
+ <rect class='three' x='36%' y='0' width='40%' height='75%' />
+ <rect class='four' x='76%' y='0' width='24%' height='100%' />
+ <rect class='border' width='100%' height='100%' />
+ <text class='label' x='50%' y='55%'>start</text>
+ </svg>
+ <svg x='256' y='2' width='250' height='120'>
+ <rect class='bg' width='100%' height='100%' />
+ <rect class='one' x='0' y='25%' width='20%' height='75%' />
+ <rect class='two' x='20%' y='50%' width='16%' height='50%' />
+ <rect class='three' x='36%' y='25%' width='40%' height='75%' />
+ <rect class='four' x='76%' y='0' width='24%' height='100%' />
+ <rect class='border' width='100%' height='100%' />
+ <text class='label' x='50%' y='55%'>end</text>
+ </svg>
+ <svg x='2' y='126' width='250' height='120'>
+ <rect class='bg' width='100%' height='100%' />
+ <rect class='one' x='0' y='12.5%' width='20%' height='75%' />
+ <rect class='two' x='20%' y='25%' width='16%' height='50%' />
+ <rect class='three' x='36%' y='12.5%' width='40%' height='75%' />
+ <rect class='four' x='76%' y='0' width='24%' height='100%' />
+ <rect class='border' width='100%' height='100%' />
+ <text class='label' x='50%' y='55%'>center</text>
+ </svg>
+ <svg x='256' y='126' width='250' height='120'>
+ <rect class='bg' width='100%' height='100%' />
+ <rect class='one' x='0' y='0' width='20%' height='100%' />
+ <rect class='two' x='20%' y='0' width='16%' height='100%' />
+ <rect class='three' x='36%' y='0' width='40%' height='100%' />
+ <rect class='four' x='76%' y='0' width='24%' height='100%' />
+ <rect class='border' width='100%' height='100%' />
+ <text class='label' x='50%' y='55%'>stretch</text>
+ </svg>
+ <svg x='2' y='250' width='504' height='125'>
+ <rect class='bg' width='100%' height='100%' />
+ <svg x='0' y='5' width='20%' height='75%'>
+ <rect class='one' width='100%' height='100%' />
<text x='2' y='20' style="font-size: 20px;">foo foo foo</text>
- </g>
- <g class='two' transform="translate(101,10)">
- <rect width='81' height='80' />
+ </svg>
+ <svg x='20%' y='10' width='16%' height='50%'>
+ <rect class='two' width='100%' height='100%' />
<text x='2' y='15' style="font-size: 15px;">foo foo foo</text>
- </g>
- <g class='three' transform="translate(182,0)">
- <rect width='201' height='100' />
+ </svg>
+ <svg x='36%' y='0' width='40%' height='75%'>
+ <rect class='three' width='100%' height='100%' />
<text x='2' y='25' style="font-size: 25;">foo foo foo foo foo</text>
- </g>
- <g class='four' transform="translate(383,5)">
- <rect width='121' height='120' />
+ </svg>
+ <svg x='76%' y='5' width='24%' height='100%'>
+ <rect class='four' width='100%' height='100%' />
<text x='2' y='20' style="font-size: 20px;">foo foo foo</text>
- </g>
- <rect class='border' x='0' y='0' width='504' height='120' />
+ </svg>
<path d="M 0 25.5 h 504" stroke="gray" stroke-width='1' stroke-dasharray="3" />
- <text class='label' x='251' y='68'>baseline</text>
- </g>
+ <rect class='border' width='100%' height='100%' />
+ <text class='label' x='50%' y='55%'>baseline</text>
+ </svg>
</svg>
\ No newline at end of file
Received on Saturday, 21 January 2012 01:00:33 UTC