examples/images/two_client_track_last_id_just_dupes.svg

<?xml version="1.0" standalone="no"?>
<svg width="600" height="525" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <!-- arrowhead marker definition -->
    <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5"
        markerWidth="6" markerHeight="6"
        orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <style>
    line {
      stroke-width: 1;
      stroke: black;
    }
    .client-label {
    font: 13px sans-serif;
    text-anchor: middle;
    baseline-shift: 30%;
    }

   .msg-label {
   font: 11px sans-serif;
   baseline-shift: 30%;
   }

   .state-label{
   font: 11px sans-serif;
   baseline-shift: -30%;
   }


  </style>


  <text x="50" y="20" class='client-label'>client1</text>
  <line x1="50" y1="20" x2="50" y2="515"></line>

  <text x="250" y="20" class='client-label'>client2</text>
  <line x1="250" y1="20" x2="250" y2="515"></line>


  <line x1="50" y1="130" x2="250" y2="295"
        marker-end="url(#arrow)" ></line>

  <text x="45" y="130" class="state-label"
        text-anchor="end">1</text>

  <text x="255" y="295" class="state-label"
        text-anchor="start">2</text>

    <path id="line-0" d="M 50,130 L 250,295"/>
    <text>
      <textPath href='#line-0' class="msg-label" startOffset="15%">1 (id: 1)</textPath>
    </text>


  <line x1="250" y1="75" x2="50" y2="185"
        marker-end="url(#arrow)" ></line>

  <text x="45" y="185" class="state-label"
        text-anchor="end">2</text>

  <text x="255" y="75" class="state-label"
        text-anchor="start">1</text>

    <path id="line-1" d="M 50,185 L 250,75"/>
    <text>
      <textPath href='#line-1' class="msg-label" startOffset="65%">1 (id: 0)</textPath>
    </text>


  <line x1="50" y1="240" x2="250" y2="350"
        marker-end="url(#arrow)" ></line>

  <text x="45" y="240" class="state-label"
        text-anchor="end">3</text>

  <text x="255" y="350" class="state-label"
        text-anchor="start">3</text>

    <path id="line-2" d="M 50,240 L 250,350"/>
    <text>
      <textPath href='#line-2' class="msg-label" startOffset="15%">1 (id: 2)</textPath>
    </text>


  <line x1="250" y1="405" x2="50" y2="515"
        marker-end="url(#arrow)" ></line>

  <text x="45" y="515" class="state-label"
        text-anchor="end">4</text>

  <text x="255" y="405" class="state-label"
        text-anchor="start">4</text>

    <path id="line-3" d="M 50,515 L 250,405"/>
    <text>
      <textPath href='#line-3' class="msg-label" startOffset="65%">1 (id: 3)</textPath>
    </text>


  <line x1="250" y1="75" x2="50" y2="460"
        marker-end="url(#arrow)" ></line>

  <text x="45" y="460" class="state-label"
        text-anchor="end">3</text>

  <text x="255" y="75" class="state-label"
        text-anchor="start">1</text>

    <path id="line-4" d="M 50,460 L 250,75"/>
    <text>
      <textPath href='#line-4' class="msg-label" startOffset="65%">1 (id: 0)</textPath>
    </text>


</svg>