set background from SVG's pagecolor attr, default to black

app/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <SVGContent id="root" url="content/intro.svg" edge-scrolling />
+  <SVGContent id="root" url="content/intro.svg" edge-scrolling @set-background="setBackground"/>
 </template>
 
 <script lang="ts">
@@ -11,6 +11,11 @@ export default defineComponent({
   name: "App",
   components: {
     SVGContent
+  },
+  methods: {
+    setBackground(background: string) {
+      document.body.style.background = background;
+    }
   }
 });
 </script>
@@ -18,7 +23,10 @@ export default defineComponent({
 <style>
 html, body {
   overflow: hidden;
-  background-color: white;
+}
+
+body {
+  background: black;
 }
 
 html, body, #app, #root {

app/src/components/SVGContent.vue

@@ -21,7 +21,7 @@ export default defineComponent({
     },
     edgeScrolling: Boolean
   },
-  setup(props) {
+  setup(props, {emit}) {
     const root = ref(null);
     const panzoom = ref<null | PanZoom>(null);
     const anchors = ref<SVGRectElement[]>([]);
@@ -36,6 +36,15 @@ export default defineComponent({
       const svgParsed = new DOMParser().parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
       const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
 
+      // Set document background
+      const svgBaseEl = svg.getElementById("base");
+      if (svgBaseEl) {
+        const pageColor = svgBaseEl.attributes.getNamedItem("pagecolor");
+        if (pageColor) {
+          emit("setBackground", pageColor.value);
+        }
+      }
+
       // PanZoom
       const pz = createPanZoom(element, {
         smoothScroll: false,