W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/css3-flexbox/images flex-align.svg,1.1,1.2

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
Message-Id: <E1RoPJl-0006Fh-Fs@lionel-hutz.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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:09 UTC