[css3-syntax] Tweak some details, add FUNCTION token.

tabatkins · tabatkins · commit 9c2fe484c678 · 2012-09-07T16:18:53.000-07:00
diff --git a/css3-syntax/railroad-diagrams.svg b/css3-syntax/railroad-diagrams.svg
@@ -1,4 +1,35 @@
-<svg xmlns='http://www.w3.org/2000/svg'>
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+	<!--
+	<diagram x='20' y='40'>
+		<title>IDENT</title>
+		
+		<optional>
+			<terminal>-</terminal>
+		</optional>
+
+		<choice>
+			<non-terminal>name-start char</non-terminal>
+			<non-terminal>escape</non-terminal>
+		</choice>
+
+		<optional>
+			<repeat>
+				<choice>
+					<non-terminal>name char</non-terminal>
+					<non-terminal>escape</non-terminal>
+				</choice>
+			</repeat>
+		</optional>
+	</diagram>
+
+	<diagram>
+		<title>FUNCTION</title>
+
+		<non-terminal>IDENT</non-terminal>
+
+		<terminal>(</terminal>
+	</diagram>
+	-->
 	<style>
 	path, line { 
 		stroke-width: 3; 
@@ -9,55 +40,91 @@
 		font: bold 14px monospace;
 		text-anchor: middle;
 	}
+	text.label {
+		text-anchor: start;
+	}
 	rect {
 		stroke-width: 3;
 		stroke: black;
 		fill: hsl(120, 100%, 90%);
 	}
 	</style>
-	<g transform="translate(20.5 40.5)">
-		<text x='0' y='-20' style="text-anchor: start;">Ident token</text>
-		
-		<path d='M 0 -10 v 20 M 10 -10 v 20 M 0 0 h 20' />
-
-		<g transform="translate(20 0)">
-			<path d="M 0 0 h 64" />
-			<rect x="20" y="-11" width="24" height="22" rx="10" ry="10" />
-			<text x="32" y="6">-</text>
-			<path d="M 0 0 a 10 10 0 0 1 10 10 v 0 a 10 10 0 0 0 10 10 h 24 a 10 10 0 0 0 10 -10 a 10 10 0 0 1 10 -10" />
-
-			<g transform="translate(64 0)">
-				<path d="M 0 0 h 200" />
-				<g transform="translate(0 0)">
-					<rect x="20" y="-11" width="160" height="22" />
-					<text x="100" y="5">name-start char</text>
-				</g>
-				<path d="M 0 0 a 10 10 0 0 1 10 10 v 10 a 10 10 0 0 0 10 10 h 160 a 10 10 0 0 0 10 -10 v -10 a 10 10 0 0 1 10 -10" />
-				<g transform="translate(0 30)">
-					<rect x="65" y="-11" width="70" height="22" />
-					<text x="100" y="5">escape</text>
+	<defs>
+		<path id='start-diagram' d='M 0 -10 v 20 M 10 -10 v 20 M 0 0 h 20' />
+		<path id='end-diagram' d="M 0 0 h 20 M 10 -10 v 20 M 20 -10 v 20" />
+	</defs>
+	<g transform="translate(.5 .5)">
+		<g transform="translate(20 40)">
+			<text x='0' y='-20' class='label'>IDENT</text>
+			
+			<use xlink:href='#start-diagram' x='0' y='0' />
+
+			<g transform="translate(20 0)">
+				<path d="M 0 0 h 64" />
+				<g transform="translate(20 0)">
+					<rect x="0" y="-11" width="24" height="22" rx="10" ry="10" />
+					<text x="12" y="5">-</text>
 				</g>
+				<path d="M 0 0 a 10 10 0 0 1 10 10 v 0 a 10 10 0 0 0 10 10 h 24 a 10 10 0 0 0 10 -10 a 10 10 0 0 1 10 -10" />
 
-				<g transform="translate(200 0)">
-					<path d="M 0 0 h 200" />
-					<path d="M 20 0 a 10 10 0 0 1 -10 -10 a 10 10 0 0 1 10 -10 h 140 a 10 10 0 0 1 10 10 a 10 10 0 0 1 -10 10" />
+				<g transform="translate(64 0)">
+					<path d="M 0 0 h 180" />
 					<g transform="translate(20 0)">
-						<rect x="20" y="-11" width="100" height="22" />
-						<text x="70" y="5">name char</text>
+						<rect x="0" y="-11" width="140" height="22" />
+						<text x="70" y="5">name-start char</text>
 					</g>
-					<path d="M 10 0 h 10 a 10 10 0 0 1 10 10 v 10 a 10 10 0 0 0 10 10 h 100 a 10 10 0 0 0 10 -10 v -10 a 10 10 0 0 1 10 -10" />
-					<g transform="translate(10 30)">
-						<rect x="45" y="-11" width="70" height="22" />
-						<text x="80" y="5">escape</text>
+					<path d="M 0 0 a 10 10 0 0 1 10 10 v 10 a 10 10 0 0 0 10 10 h 140 a 10 10 0 0 0 10 -10 v -10 a 10 10 0 0 1 10 -10" />
+					<g transform="translate(20 30)">
+						<rect x="35" y="-11" width="70" height="22" />
+						<text x="70" y="5">escape</text>
 					</g>
-					<path d="M 0 0 a 10 10 0 0 1 10 10 v 30 a 10 10 0 0 0 10 10 h 140 a 10 10 0 0 0 10 -10 v -30 a 10 10 0 0 1 10 -10" />
 
 					<g transform="translate(180 0)">
-						<path d="M 0 0 h 20 M 10 -10 v 20 M 20 -10 v 20" />
+						<path d="M 0 0 h 200" />
+						<path d="M 20 0 a 10 10 0 0 1 -10 -10 a 10 10 0 0 1 10 -10 h 140 a 10 10 0 0 1 10 10 a 10 10 0 0 1 -10 10" />
+						<g transform="translate(40 0)">
+							<rect x="0" y="-11" width="100" height="22" />
+							<text x="50" y="5">name char</text>
+						</g>
+						<path d="M 10 0 h 10 a 10 10 0 0 1 10 10 v 10 a 10 10 0 0 0 10 10 h 100 a 10 10 0 0 0 10 -10 v -10 a 10 10 0 0 1 10 -10" />
+						<g transform="translate(30 30)">
+							<rect x="25" y="-11" width="70" height="22" />
+							<text x="60" y="5">escape</text>
+						</g>
+						<path d="M 0 0 a 10 10 0 0 1 10 10 v 30 a 10 10 0 0 0 10 10 h 140 a 10 10 0 0 0 10 -10 v -30 a 10 10 0 0 1 10 -10" />
+
+						<g transform="translate(180 0)">
+							<use xlink:href='#end-diagram' x='0' y='0' />
+						</g>
 					</g>
 				</g>
 			</g>
 		</g>
-	</g>
 
+		<g transform="translate(20 140)">
+			<text x='0' y='-20' class='label'>FUNCTION</text>
+			
+			<use xlink:href='#start-diagram' x='0' y='0' />
+
+			<g transform="translate(20 0)">
+				<path d="M 0 0 h 80" />
+				<g transform="translate(10 0)">
+					<rect x="0" y="-11" width="60" height="22" />
+					<text x="30" y="5">IDENT</text>
+				</g>
+
+				<g transform="translate(80 0)">
+					<path d="M 0 0 h 44" />
+					<g transform="translate(10 0)">
+						<rect x="0" y="-11" width="24" height="22" rx="10" ry="10" />
+						<text x="12" y="5">(</text>
+					</g>
+
+					<g transform="translate(44 0)">
+						<use xlink:href='#end-diagram' x='0' y='0' />
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
 </svg>
