I want to use a svg as container for a div element which should contain several elements. At the moment it looks like this:
<body>
<svg width="100%" height="100%" viewBox="0 0 45 90" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M45.02,17.449l0,-5.837l-0.324,0c0,-3.841 0,-6.21 0,-6.344c0,-0.786 0.105,-3.078 -2.657,-3.659c-5.996,-1.263 -19.539,-1.352 -19.539,-1.352c0,0 -13.543,0.089 -19.539,1.352c-2.762,0.58 -2.657,2.873 -2.657,3.659c0,0.192 0,4.987 0,12.133l-0.324,0l0,14.537l0.324,0c0,22.9 0,52.313 0,52.794c0,0.786 -0.105,3.079 2.656,3.66c5.997,1.262 19.54,1.351 19.54,1.351c0,0 13.542,-0.089 19.539,-1.351c2.762,-0.581 2.657,-2.874 2.657,-3.66c0,-0.594 0,-45.159 0,-67.283l0.324,0Zm-22.52,-13.778c0.535,0 0.969,0.434 0.969,0.969c0,0.536 -0.434,0.97 -0.969,0.97c-0.535,0 -0.969,-0.435 -0.969,-0.97c0,-0.536 0.434,-0.969 0.969,-0.969Zm20.262,75.595l-40.525,0l0,-71.234l40.524,0l0,71.234l0.001,0Z" style="fill-rule:nonzero;"></path>
<foreignObject x="2.238" y="8.019" width="40" height="71">
<div id="screen">
I'm a very long text. Why am I so big?
</div>
</foreignObject>
</svg>
</body>
CSS
html, body{
width: 100%;
height: 100%;
}
#screen{
background: green;
overflow: scroll;
width: 100%;
height: 100%;
font-size: 10px;
}
My problem is that all elements inside the screen-div are way larger than expected. e.g. see the scrollbar or the size of the text.
I assume the content of the foreignObject is scaled by the same factor as the svg. Is there a way to avoid this? Could I normalize the div inside the foreignObject to be not scaled or zoomed?