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

This commit is contained in:
Tomáš Mládek 2021-01-10 16:28:19 +01:00
parent 77e20afc61
commit b3212c6c6a
2 changed files with 20 additions and 3 deletions

View file

@ -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 {

View file

@ -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,