- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 24 Jan 2012 01:11:52 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox/images
In directory hutz:/tmp/cvs-serv26174/images
Added Files:
flex-direction-terms.svg
Log Message:
Tweaking the wording of the abstract and intro. Added a graphic to the intro illustrating the directional terms.
--- NEW FILE: flex-direction-terms.svg ---
<svg xmlns="http://www.w3.org/2000/svg" width='510' height='300'>
<style>
:root {
font-family: sans-serif;
font-size: 16px;
}
svg svg { overflow: visible; }
</style>
<defs>
<marker id="arrow"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<rect width='100%' height='100%' fill='white' />
<svg x='10' y='90' width='300' height='100'>
<rect x='30' y='0' width='270' height='100' rx='20' ry='20' fill='#444' />
<rect x='40' y='10' width='70' height='80' rx='10' ry='10' fill='#888' />
<rect x='120' y='10' width='170' height='80' rx='10' ry='10' fill='#888' />
<svg x='15' y='-28' width='300' height='25'>
<path d="M 0 20 h 280" stroke="black" stroke-width='3' marker-end="url(#arrow)" />
<text x='140' y='16' text-anchor="middle">main axis/direction</text>
</svg>
<svg x='10' y='-23' width='300' height='25'>
<g transform="translate(0 20) rotate(90) translate(0 -20)">
<path d="M 0 20 h 100" stroke="black" stroke-width='3' marker-end="url(#arrow)" />
<text x='50' y='16' text-anchor="middle">cross axis</text>
</g>
</svg>
<svg x='120' y='45' width='170'>
<path d="M 0 0 h 170" stroke='white' stroke-width='3' stroke-dasharray='3' />
<text x='50%' y='20' text-anchor="middle" fill='white'>main size</text>
</svg>
<svg x='30' y='110' width='270'>
<path d="M 0 0 v 10 m 0 -5 h 20" stroke='black' stroke-width='3' />
<text x='22' y='10'>main-start</text>
<path d="M 270 0 v 10 m 0 -5 h -20" stroke='black' stroke-width='3' />
<text x='248' y='10' text-anchor="end">main-end</text>
</svg>
</svg>
<svg x='370' y='0' width='100' height='300'>
<rect x='0' y='30' width='120' height='270' rx='20' ry='20' fill='#444' />
<rect x='10' y='40' width='100' height='70' rx='10' ry='10' fill='#888' />
<rect x='10' y='120' width='100' height='170' rx='10' ry='10' fill='#888' />
<svg x='-15' y='0' width='300' height='25'>
<path d="M 0 20 h 130" stroke="black" stroke-width='3' marker-end="url(#arrow)" />
<text x='65' y='16' text-anchor="middle">cross axis</text>
</svg>
<svg x='10' y='60' width='100'>
<path d="M 0 0 h 100" stroke='white' stroke-width='3' stroke-dasharray="3"/>
<text x='50%' y='20' text-anchor="middle" fill='white'>cross size</text>
</svg>
<svg x='-20' y='5' width='300' height='25'>
<g transform="translate(0 20) rotate(90) translate(0 -20)">
<path d="M 0 20 h 260" stroke="black" stroke-width='3' marker-end="url(#arrow)" />
<text x='130' y='16' text-anchor="middle">main axis</text>
</g>
</svg>
<svg x='4' y='150' width='270'>
<path d="M 0 0 v 10 m 0 -5 h 20" stroke='white' stroke-width='3' />
<text x='22' y='10' fill='white'>cross-start</text>
<path d="M 112 30 v 10 m 0 -5 h -20" stroke='white' stroke-width='3' />
<text x='90' y='40' fill='white' text-anchor="end">cross-end</text>
</svg>
</svg>
</svg>
Received on Tuesday, 24 January 2012 01:11:54 UTC