From 1d9f5325c555fff8a242842f1a0ff391776c9c5f Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Mon, 16 Jun 2025 22:41:29 -0700
Subject: [PATCH] Try using HTML markup in an SVG file

---
 public/map4.svg | 16 ++++++++++++++++
 public/test.svg |  6 ++++++
 2 files changed, 22 insertions(+)
 create mode 100644 public/test.svg

diff --git a/public/map4.svg b/public/map4.svg
index c556811..acb8336 100644
--- a/public/map4.svg
+++ b/public/map4.svg
@@ -22,6 +22,21 @@
 
   <rect id="background"/>
 
+  <foreignObject width="100%" height="100%">
+    <!--
+      In the context of SVG embedded in an HTML document, the XHTML
+      namespace could be omitted, but it is mandatory in the
+      context of an SVG document
+    -->
+
+    <div style="background-color: orange" xmlns="http://www.w3.org/1999/xhtml">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
+      mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
+      imperdiet eros. Aliquam erat volutpat.
+      <img src="test.svg" width="10" height="10"/>
+    </div>
+  </foreignObject>
+
   <g class="gameboard">
     <g id="firing-arcs">
       <g id="shapes"/>
@@ -29,5 +44,6 @@
     </g>
     <g class="grid"/>
   </g>
+
   <script href="map.js" data-cols="33" data-rows="25"></script>
 </svg>
diff --git a/public/test.svg b/public/test.svg
new file mode 100644
index 0000000..0e257ce
--- /dev/null
+++ b/public/test.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <circle r="5" fill="purple"/>
+</svg>