avoid scaling of elements inside foreign Objects of svgs - HTML CSS SVG

HTML CSS examples for SVG:Path

  1. HOME
  2. HTML CSS
  3. SVG
  4. Path

Description

avoid scaling of elements inside foreign Objects of svgs

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

html, body, #screen {
   width:100%; height:100%; font-size:12px
}
#screen {<!--from  w w w  .j a  v  a 2 s  .com-->
   background: green;
   overflow: auto;
   padding:2px;
   box-sizing:border-box
}
      </style> 
 </head> 
 <body> 
  <svg width="180px" height="360px" viewbox="0 0 45 90" xmlns="http://www.w3.org/2000/svg"> 
   <path d="M45.02,17.4,-5.8-0.3,0c0,-3.841 0,-6.21 0,-6.344c0,-0.786 0.105,-3.078 -2.6,-3.6-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"></path> 
   <foreignobject width="164" height="288" transform="translate(2.238,8.019) scale(0.25,0.25)"> 
    <div id="screen">
      this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. 
    </div> 
   </foreignobject> 
  </svg> 
  <div>
    Text 
  </div>  
 </body>
</html>

Related Tutorials