SVG circle take all the height preserving aspect ratio on any div size - HTML CSS SVG

HTML CSS examples for SVG:Circle

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

Description

SVG circle take all the height preserving aspect ratio on any div size

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">

.demonstration {<!--   ww  w.j  av  a 2s  .c om-->
   resize: vertical;
   border: 1px solid gray;
   padding-bottom: 20px;
}
      </style> 
 </head> 
 <body> 
  <div style="width:200px;height:100px;overflow:hidden"> 
   <svg height="100%" viewbox="0 0 200 100" preserveaspectratio="xMinYMin meet"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="0" fill="red" /> 
    <text x="100" y="50">
      200px w: cut text 
    </text> 
   </svg> 
  </div> 
  <div style="width:500px;height:100px;overflow:hidden"> 
   <svg height="100%" viewbox="0 0 200 100" preserveaspectratio="xMinYMin meet"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="0" fill="red" /> 
    <text x="100" y="50">
      500px w: full visible text 
    </text> 
   </svg> 
  </div> 
  <div style="width:50px;height:100px;overflow:hidden"> 
   <svg height="100%" viewbox="0 0 200 100" preserveaspectratio="xMinYMin meet"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="0" fill="red" /> 
    <text x="100" y="50">
      100px width : Nothing is visible 
    </text> 
   </svg> 
  </div> 
  <div style="width:50px;height:100px;overflow:hidden;" class="demonstration"> 
   <svg height="100%" viewbox="0 0 200 100" preserveaspectratio="xMinYMin meet"> 
    <circle cx="50" cy="50" r="50" stroke="black" stroke-width="0" fill="red" /> 
    <text x="100" y="50">
      100px width : Nothing is visible 
    </text> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials