draw a svg in multiple locations, on top of another svg image - HTML CSS SVG

HTML CSS examples for SVG:Image

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

Description

draw a svg in multiple locations, on top of another svg image

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="400" viewbox="0 0 500 400"> 
   <defs> 
    <g id="pin"> 
     <circle cx="0" cy="0" r="7" fill="white" stroke="green" stroke-width="2" /> 
    </g> <!-- w  w  w. j  ava2  s  .  c  om-->
   </defs> 
   <g id="floor" fill="#ddd" stroke="black" stroke-width="3"> 
    <rect x="50" y="50" width="200" height="150" /> 
    <rect x="100" y="200" width="150" height="150" /> 
    <rect x="250" y="100" width="200" height="225" /> 
   </g> 
   <g id="markers"> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials