Input tags inside SVG?

I need to give a form a very specific layout. All the frames in the attached file (coloured ones & white ones) should be textareas.

What is the best way to approach this? I was thinking of working with an SVG file (export from indesign) with input tags inside of it, to make sure the textareas are on the correct place, but I don’t know if this is even possible.

Is the pentagon & arrows in the center required or just used for a visual of spacing? Is this a fixed sized layout or responsive?

The pentagon should also be a textarea, and the arrows symbolise the fact that the pentagon summarises what is written in the coloured rectangles.

Without the pentagon & arrows I would use pure CSS, but they make it harder.

Ideally speaking, the layout should be responsive.

I was also thinking of using the original design as a background image, but I have no idea how to place the textareas exactly above the right rectangles (or pentagon), especially since users will use different kind of devices.

Ya, that is what I was hoping too cause it would be an easier solution. :rofl:

I’m not really great with SVGs, but if you have a good clean SVG it should/could be possible? You’d just need to append .text to each container, maybe?

If you could make a codePen for a starting point that could help; but honestly I’m not sure the best route to even go to start.

Thanks for the input!

Yes, you just do

<svg>
  <!-- SVG stuff -->
  <foreignObject // will need the x/y and height/width>
    <!-- html here -->
  </foreignObject>
  <!-- probably more SVG stuff -->
</svg>

It will probably get a bit messy though, mainly due to the sizes of things, you need to start getting very specific

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject