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

csswg/css3-flexbox/images flex-direction-terms.svg,NONE,1.1

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
Message-Id: <E1RpUvQ-0006or-Mf@lionel-hutz.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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:49 UTC