src/lib/components/common/SVGPanZoom.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import panzoom from 'panzoom';

	import DOMPurify from 'dompurify';

	export let className = '';
	export let svg = '';

	let instance;

	let sceneParentElement: HTMLElement;
	let sceneElement: HTMLElement;

	$: if (sceneElement) {
		instance = panzoom(sceneElement, {
			bounds: true,
			boundsPadding: 0.1,

			zoomSpeed: 0.065
		});
	}
</script>

<div bind:this={sceneParentElement} class={className}>
	<div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
		{@html svg}
	</div>
</div>