- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 18 Jan 2012 01:00:14 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox/images
In directory hutz:/tmp/cvs-serv12735/images
Added Files:
flex-pack.svg
Log Message:
Let's actually add the diagram
--- NEW FILE: flex-pack.svg ---
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504 270">
<defs>
<pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
<rect x='0' y='0' width='10' height='10' fill='#eee' />
<rect x='10' y='10' width='10' height='10' fill='#eee' />
<rect x='0' y='10' width='10' height='10' fill='#ccc' />
<rect x='10' y='0' width='10' height='10' fill='#ccc' />
</pattern>
</defs>
<style>
text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
g > rect:nth-child(1) { fill: url(#checker); }
g > rect:nth-child(2) { fill: #fcc; }
g > rect:nth-child(3) { fill: #cfc; }
g > rect:nth-child(4) { fill: #ccf; }
g > rect:nth-child(5) { stroke: black; stroke-width: 2; fill: transparent; }
</style>
<g transform="translate(2,2)">
<rect x='0' y='0' width='500' height='50' />
<rect x='0' y='0' width='100' height='50' />
<rect x='100' y='0' width='80' height='50' />
<rect x='180' y='0' width='200' height='50' />
<rect x='0' y='0' width='500' height='50' />
<text x='250' y='38'>start</text>
</g>
<g transform="translate(2,56)">
<rect x='0' y='0' width='500' height='50' />
<rect x='120' y='0' width='100' height='50' />
<rect x='220' y='0' width='80' height='50' />
<rect x='300' y='0' width='200' height='50' />
<rect x='0' y='0' width='500' height='50' />
<text x='250' y='38'>end</text>
</g>
<g transform="translate(2,110)">
<rect x='0' y='0' width='500' height='50' />
<rect x='60' y='0' width='100' height='50' />
<rect x='160' y='0' width='80' height='50' />
<rect x='240' y='0' width='200' height='50' />
<rect x='0' y='0' width='500' height='50' />
<text x='250' y='38'>center</text>
</g>
<g transform="translate(2,164)">
<rect x='0' y='0' width='500' height='50' />
<rect x='0' y='0' width='100' height='50' />
<rect x='160' y='0' width='80' height='50' />
<rect x='300' y='0' width='200' height='50' />
<rect x='0' y='0' width='500' height='50' />
<text x='250' y='38'>justify</text>
</g>
<g transform="translate(2,218)">
<rect x='0' y='0' width='500' height='50' />
<rect x='20' y='0' width='100' height='50' />
<rect x='160' y='0' width='80' height='50' />
<rect x='280' y='0' width='200' height='50' />
<rect x='0' y='0' width='500' height='50' />
<text x='250' y='38'>distribute</text>
</g>
</svg>
Received on Wednesday, 18 January 2012 01:00:16 UTC