Creating a seat plan for a office floor.

You could create selectable svg image(s) of the office plan and plug it in to an interface using the Interactive SVG Map Component plugin

Thanks Bilal,

This solution is working.

I am having one problem while writing text, where i give the following code the text is partly hidden.

Is there an option to overlap the text on the images.

Part of the text is getting hidden behind the desk images.

<text x="10" y="10">Hello World!</text>

You will likely need to experiment with the x/y coordinates (that you mention above), transform as well as the viewBox you've set for your image. Unfortunately there isn't a straight forward answer and will require some playing around with your svg. Alternatively you could set your text as tooltips if it makes sense to do so.

If you are still experiencing issues then you might need to provide more space on your interface if it shares space with other components as it could impact how your image appears on the page.

You will likely need to experiment with the x/y coordinates (that you mention above), transform as well as the viewBox you've set for your image. Unfortunately there isn't a straight forward answer and will require some playing around with your svg. Alternatively you could set your text as tooltips if it makes sense to do so.

If you are still experiencing issues then you might need to provide more space on your interface if it shares space with other components as it could impact how your image appears on the page.

Thanks Bilal, after experimenting i got the solution.
Putting the text code just before the end of the SVG image code brings the text overlapping the image in the background.