Exactly position html elements above svg

I have an HTML page with an SVG in it. I know want to place HTML elements (input elements to be exact) above the SVG programmatically.

I have the desired positions of the elements in percent of the SVG width and height.

How do I get the elements to that position?

One Idea of mine was, to have a div around the SVG with exactly the same dimensions than I could do:

<div ...>
    <svg>...</svg>
    <input style="top:10%..."/>
    ...
</div>

But for this, the outer div would have to have the exact same dimensions as the SVG, and I do not know how to do that. The SVG has only a viewBox, no "width" and "height" attributes.

Exactly position html elements above svg

1 Answers