embed an image with rounded corners in svg - HTML CSS SVG

HTML CSS examples for SVG:Image

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

Description

embed an image with rounded corners in svg

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <svg width="640" height="800"> 
   <clippath id="clip" clippathunits="objectBoundingBox"> 
    <rect ry="0.1" width="1" height="1" fill="black" /> 
   </clippath> 
   <rect x="280" y="0" width="80" height="100" style="fill:limegreen;" clip-path="url(#clip)" /> 
   <rect x="260" y="90" ry="15" width="120" height="30" style="fill:mintcream; stroke:black;" /> 
   <rect x="200" y="150" width="80" height="100" style="fill:limegreen;" clip-path="url(#clip)" /> 
   <rect x="180" y="240" ry="15" width="120" height="30" style="fill:mintcream; stroke:black;" /> 
  </svg>  <!--   ww w  .j av  a  2 s  .c  o m-->
 </body>
</html>

Related Tutorials