Nice refactor of viewBox’s

2022-06-07 19:46:31 +01:00
parent bea50a033a
commit 4d00aab469
10 changed files with 313 additions and 75 deletions
@@ -0,0 +1,71 @@
+<svg height="100" width="200" viewBox="190 40 10 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <title>Bench, Forest Gump</title>
+
+  <defs>
+    <g id="post">
+      <rect width="20" height="150" fill="rgb(208,196,192)"/>
+      <path d="M0,0 l3-3 h20 l-3,3 Z" fill="rgb(156,147,144)" />
+      <path d="M20,0 l3-3 v150 l-3,3 Z" fill="rgb(104,98,96)" />
+    </g>
+
+    <g id="foot">
+      <rect width="20" height="10" fill="rgb(208,196,192)"/>
+      <path d="M0,0 l30-30 h20 l-30,30 Z" fill="rgb(156,147,144)" />
+      <path d="M20,0 l30-30 v10 l-30,30 Z" fill="rgb(104,98,96)" />
+    </g>
+
+    <g id="back">
+      <rect width="300" height="10" fill="rgb(120,60,30)" />
+      <path d="M0,0 l3-3 h300 l-3,3 Z" fill="rgb(90,45,20)" />
+      <path d="M300,0 l3-3 v10 l-3,3 Z" fill="rgb(60,30,10)" />
+    </g>
+
+    <g id="seat">
+      <rect width="300" height="5" fill="rgb(120,60,30)" />
+      <path d="M0,0 l5-5 h300 l-5,5 Z" fill="rgb(90,45,20)" />
+      <path d="M300,0 l5-5 v5 l-5,5 Z" fill="rgb(60,30,10)" />
+    </g>
+
+    <g id="box">
+      <title>Box of Chocolates</title>
+
+      <rect width="45" height="15" fill="rgb(240,240,255)"/>
+      <path d="M0,0 l25-25 h45 l-25,25 Z" fill="rgb(220,220,240)" />
+      <path d="M45,0 l25-25 v15 l-25,25 Z" fill="rgb(200,200,220)" />
+
+      <rect x="20" width="5" height="15" fill="rgb(255,0,0)"/>
+      <path d="M20,0 l25-25 h5 l-25,25 Z" fill="rgb(255,32,32)" />
+      <path d="M10,-10 l5-5 h45 l-5,5 Z" fill="rgb(255,32,32)" />
+      <path d="M55,-10 l5-5 v15 l-5,5 Z" fill="rgb(255,64,64)" />
+
+      <path d="M35,-10 s-40,-30 0,-6 M35,-10 s60,-30 0,-6"
+            fill="none" stroke="red" stroke-width="2" />
+    </g>
+
+  </defs>
+
+  <g>
+    <title>Bench</title>
+    <use xlink:href="#foot" x="56.5" y="213.5"/>
+    <use xlink:href="#foot" x="276.5" y="213.5"/>
+
+    <use xlink:href="#post" x="70" y="50"/>
+    <use xlink:href="#post" x="290" y="50"/>
+
+    <use xlink:href="#foot" x="40" y="160"/>
+    <use xlink:href="#foot" x="260" y="160"/>
+
+    <use xlink:href="#back" x="40" y="60"/>
+    <use xlink:href="#back" x="40" y="80"/>
+    <use xlink:href="#back" x="40" y="100"/>
+
+    <use xlink:href="#seat" x="40" y="140"/>
+    <use xlink:href="#seat" x="30" y="148"/>
+    <use xlink:href="#seat" x="20" y="156"/>
+  </g>
+
+  <g>
+    <use xlink:href="#box"  x="225" y="140"/>
+  </g>
+</svg>
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.125" height="6.84375">
+	<defs>
+		<pattern id="squares" patternTransform="translate(659.5,823.5)" height="4" width="4" patternUnits="userSpaceOnUse">
+			<g transform="translate(-655.66998,-825.24652)" style="fill:#917c6f;fill-opacity:1">
+				<rect y="827.24652" x="655.66998" height="2" width="2" style="fill:#917c6f;fill-opacity:1;stroke:none"/>
+				<rect style="fill:#917c6f;fill-opacity:1;stroke:none" width="2" height="2" x="657.66998" y="825.24652"/>
+			</g>
+			<g transform="translate(-655.66998,-825.24652)" style="fill:#e6e6e6;fill-opacity:1">
+				<rect style="fill:#e6e6e6;fill-opacity:1;stroke:none" width="2" height="2" x="657.66998" y="827.24652"/>
+				<rect y="825.24652" x="655.66998" height="2" width="2" style="fill:#e6e6e6;fill-opacity:1;stroke:none"/>
+			</g>
+		</pattern>
+	</defs>
+	<g transform="translate(-537.875,-403.3125)">
+		<rect width="11.999936" height="6.7170639" x="537.93756" y="403.37671" style="fill:url(#squares)"/>
+	</g>
+</svg>
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
+<clipPath id="t">
+	<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
+</clipPath>
+<path d="M0,0 v30 h60 v-30 z" fill="#00247d"/>
+<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
+<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#cf142b" stroke-width="4"/>
+<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
+<path d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/>
+</svg>