Create two rectangle with SVG - HTML CSS SVG

HTML CSS examples for SVG:Rectangle

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

Description

Create two rectangle with SVG

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

#graphic {<!--from   w  ww . j  a v  a  2 s . c om-->
   width: 500px;
   height: 500px;
}
#red {
   font-size: 200px;
}
#red:hover {
   -webkit-animation: scaleheight 1s ease-in-out infinite alternate;
}
@-webkit-keyframes scaleheight {
   0% {
      fill:red;
   }
   100% {
      fill:blue;
      font-size: 300px;
   }
}


      </style> 
 </head> 
 <body> 
  <svg version="1.1" id="graphic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1280 800" enable-background="new 0 0 1280 800" xml:space="preserve"> 
   <rect id="red" x="300.5" y="-515.5" stroke="#FFFFFF" stroke-miterlimit="10" width="270" fill="red" height="2em" transform="scale(1,-1)" /> 
   <rect id="blue" x="500.5" y="515.5" stroke="#eeeeee" stroke-miterlimit="10" width="270" fill="blue" height="270" /> 
  </svg>  
 </body>
</html>

Related Tutorials