SVG example: Horizontal bars

This example tries to demonstrate how horizontal bars can be created with SVG:

SVG Source

This image was created with the following SVG source:

<?xml version="1.0" ?>
<svg
   xmlns  = "http://www.w3.org/2000/svg"
   height = "62"
   width  = "518"
>

<style>
   rect {
      fill: #f95;
      height: 17;
   }
   text {
      fill: #52d;
      font: 10px sans-serif;
      font-weight: bold;
      text-anchor: end;
   }
</style>

  <g transform="translate(5,5)">
     <rect width="282" height="17"></rect>
     <text x="282" y="12" dx="-3">420</text>
  </g>

  <g transform="translate(5,25)">
     <rect width="513" height="17"></rect>
     <text x="513" y="12" dx="-3">513</text>
  </g>

  <g transform="translate(5,45)">
     <rect width="479" height="479"></rect>
     <text x="479" y="12" dx="-3">479</text>
  </g>

</svg>

Github repository about-svg, path: /examples/horizontal-bars.svg

SVG example: Horizontal bars

SVG Source

See also