title: How to avoid scaling of elements inside foreignObjects of svgs?
body: <p>I want to use a svg as container for a div element which should contain several elements. At the moment it looks like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;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;"&gt;
         &lt;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;"&gt;&lt;/path&gt;
         &lt;foreignObject x="2.238" y="8.019" width="40" height="71"&gt;
            &lt;div id="screen"&gt;
               I'm a very long text. Why am I so big?
            &lt;/div&gt;
         &lt;/foreignObject&gt;
      &lt;/svg&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body{
    width: 100%;
    height: 100%;
  }
  
  #screen{
    background: green;
    overflow: scroll;
    width: 100%;
    height: 100%;
    font-size: 10px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/7ttps7a7/1/" rel="noreferrer" title="JS Fiddle">JSFiddle</a></p>
  
  <p>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.</p>
  
  <p>I assume the content of the <code>foreignObject</code> is scaled by the same factor as the svg. Is there a way to avoid this? Could I normalize the div inside the <code>foreignObject</code> to be not scaled or zoomed?</p>
  
  <hr>
  
  <p><a href="https://thenounproject.com/MartinJordan/uploads/?i=32550" rel="noreferrer">svg is "Smartphone" by Martin Jordan from the Noun Project</a></p>