Svg scale rect to overlap corners - HTML CSS SVG

HTML CSS examples for SVG:Rectangle

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

Description

Svg scale rect to overlap corners

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>

html,<!--from ww  w  .j  a  va 2  s.c o  m-->
body {
   box-sizing: border-box;
   height: 100vh;
   width: 100vw;
   line-height: 1;
   position: relative;
   background-color: #ddd;
   color: #000;
}
*,
*:before,
*:after {
   box-sizing: inherit;
   margin: 0;
   padding: 0;
   border: 0 none hlsa(0%, 0, 0, 0);
   outline: 0 none hlsa(0%, 0, 0, 0);
}


      </style> 
 </head> 
 <body translate="no"> 
  <svg width="200px" height="200px" viewbox="0 0 200 200"> 
   <g id="square"> 
    <rect x="15" y="15" width="20" height="20" style="fill: none; stroke: red;" /> 
   </g> 
   <use xlink:href="#square" transform="scale(5), translate(-12.5,-12.5)" /> 
  </svg>  
 </body>
</html>

Related Tutorials