set a stroke-width:1 on only certain sides of SVG shapes - HTML CSS SVG

HTML CSS examples for SVG:Rectangle

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

Description

set a stroke-width:1 on only certain sides of SVG shapes

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">
rect {<!--  ww  w. j  ava  2 s.co  m-->
   fill:none;
   stroke:black;
}

.top {
   stroke-dasharray:0,51,151
}

.left {
   stroke-dasharray:151,51
}

.bottom {
   stroke-dasharray:100,51
}

.right {
   stroke-dasharray:51,51,100
}
</style> 
 </head> 
 <body> 
  <svg height="300"> 
   <rect x="0.5" y="0.5" width="50" height="50" class="top" /> 
   <rect x="0.5" y="60.5" width="50" height="50" class="left" /> 
   <rect x="0.5" y="120.5" width="50" height="50" class="bottom" /> 
   <rect x="0.5" y="180.5" width="50" height="50" class="right" /> 
  </svg>  
 </body>
</html>

Related Tutorials