From 8aecd8c7aca6e02f8bea18e4afcef15e1e272a15 Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Mon, 10 Apr 2023 12:40:58 +0100
Subject: [PATCH] Base: Add SVG transform test page

---
 Base/res/html/misc/svg-transforms.html | 108 +++++++++++++++++++++++++
 Base/res/html/misc/welcome.html        |   1 +
 2 files changed, 109 insertions(+)
 create mode 100644 Base/res/html/misc/svg-transforms.html

diff --git a/Base/res/html/misc/svg-transforms.html b/Base/res/html/misc/svg-transforms.html
new file mode 100644
index 0000000000..fed98f2e97
--- /dev/null
+++ b/Base/res/html/misc/svg-transforms.html
@@ -0,0 +1,108 @@
+<style>
+  body {
+    margin: 50px;
+  }
+</style>
+<!-- SVG transforms test page, based on MDN examples -->
+<svg
+  width="200px" height="100px"
+  viewBox="0 0 150 100"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g
+    fill="grey"
+    transform="rotate(-10 50 100)
+               translate(-36 45.5)
+               skewX(40)
+               scale(1 0.5)">
+    <path
+      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
+     />
+  </g>
+  <g
+    fill="none"
+    stroke="red"
+    >
+    <path
+      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
+  </g>
+</svg>
+<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect x="10" y="10" width="30" height="20" fill="green" />
+  <rect
+    x="10"
+    y="10"
+    width="30"
+    height="20"
+    fill="red"
+    transform="matrix(3 1 -1 3 30 40)" />
+</svg>
+<svg width="200px" height="200px"  viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-3" y="-3" width="6" height="6" />
+
+  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
+</svg>
+<svg width="200px" height="200px" viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="10" height="10" />
+
+  <!-- rotation is done around the point 0,0 -->
+  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
+
+  <!-- rotation is done around the point 10,10 -->
+  <rect
+    x="0"
+    y="0"
+    width="10"
+    height="10"
+    fill="green"
+    transform="rotate(100 10 10)" />
+</svg>
+<svg  width="200px" height="200px" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- uniform scale -->
+  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
+
+  <!-- vertical scale -->
+  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1 4)" />
+
+  <!-- horizontal scale -->
+  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4 1)" />
+
+  <!-- No scale -->
+  <circle cx="0" cy="0" r="10" fill="black" />
+</svg>
+<svg width="200px" height="200px" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-3" y="-3" width="6" height="6" />
+
+  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
+</svg>
+<svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- No translation -->
+  <rect x="5" y="5" width="40" height="40" fill="green" />
+
+  <!-- Horizontal translation -->
+  <rect
+    x="5"
+    y="5"
+    width="40"
+    height="40"
+    fill="blue"
+    transform="translate(50)" />
+
+  <!-- Vertical translation -->
+  <rect
+    x="5"
+    y="5"
+    width="40"
+    height="40"
+    fill="red"
+    transform="translate(0 50)" />
+
+  <!-- Both horizontal and vertical translation -->
+  <rect
+    x="5"
+    y="5"
+    width="40"
+    height="40"
+    fill="yellow"
+    transform="translate(50 50)" />
+</svg>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index bc01e6bf28..2024e8a952 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -70,6 +70,7 @@
             <li><a href="images.html">images</a></li>
             <li><a href="pre.html">pre</a></li>
             <li><a href="svg.html">svg</a></li>
+            <li><a href="svg-transforms.html">svg transforms</a></li>
             <li><a href="small.html">small</a></li>
             <li><a href="link.html">link</a></li>
             <li><a href="afrag.html">links with fragments</a></li>