I recently created a Whiteboard using Vue. The Whiteboard consists of an SVG element where I can add other SVG elements like paths to it. In order to enable scrolling within the SVG, I came across this example which seemed quite helpful.
Below is the HTML code for my Whiteboard:
<svg width="1300px" height="500px" style="overflow-x:scroll; overflow-y:scroll;" viewBox="0 0 1300 500" class="flex-item" id="whiteboard" ref="whiteboard"/>
Additionally, here is the corresponding CSS style section for the Whiteboard:
#whiteboard {
/*position: absolute;*/
/*width: 100%;
height: 100%;*/
background: rgb(255, 255, 255);
z-index: 1;
}
Despite my efforts, I am facing issues with making it work properly. It could possibly be due to Vue but I'm not entirely sure. Any assistance would be highly appreciated :)
Thank you in advance for your help!