Stretching one of the three svg in width in a block - HTML CSS SVG

HTML CSS examples for SVG:svg element

  1. HOME
  2. HTML CSS
  3. SVG
  4. svg element

Description

Stretching one of the three svg in width in a block

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

.container {<!--from  w  ww . j a v  a 2  s .co m-->
   display: flex;
   align-items:center;
}
svg {
   width: 100%;
   height: 100px;
}
svg:nth-child(2) {
   width: 1000px;
}
svg rect.st2 {
   fill: red;
}
svg rect.st1 {
   fill: green;
   width: 2000px;
}
svg rect.st0 {
   fill: blue;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <svg viewbox="0 0 800 100"> 
    <rect class="st0" width="100%" height="100px" /> 
   </svg> 
   <svg viewbox="0 0 800 100" preserveaspectratio="none"> 
    <rect class="st1" width="100px" height="100px" /> 
   </svg> 
   <svg viewbox="0 0 800 100"> 
    <rect class="st2" width="100%" height="100px" /> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials