SVG: position group relative to other group

Question

I am making a timeline component:

The "marker" (circle with arrow) is a group with a circle and a path inside it.

I want to be able to move the marker to coincide with the other white circles as needed with JS (Angular), but the circle and the path are using positioning from the top left of the entire SVG — I cannot seem to move the X position of the marker group.

If I set the group's X the artwork inside remains where it was created.

Is this possible within one SVG file? How would I create a marker where the circle and path are relative to the group's top left?

<svg
  version="1.1"
  id="timeline"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px"
  y="0px"
  width="250px"
  viewBox="0 0 225 26"
>
  <defs>
    <filter id="markerShadow">
      <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="#000000" flood-opacity="0.5" />
    </filter>
  </defs>

  <g id="seg3">
    <path class="empty" d="M218,6h-70v14h70c3.9,0,7-3.1,7-7S221.9,6,218,6z" />
  </g>
  <g id="seg2">
    <rect x="77" y="6" class="empty" width="71" height="14" />
  </g>
  <g id="seg1">
    <path class="empty" d="M7,6c-3.9,0-7,3.1-7,7s3.1,7,7,7h70V6H7z" />
  </g>
  <circle id="dot4" class="dot" cx="218" cy="13" r="5" />
  <circle id="dot3" class="dot" cx="148" cy="13" r="5" />
  <circle id="dot2" class="dot" cx="78" cy="13" r="5" />
  <circle id="dot1" class="dot" cx="7" cy="13" r="5" />
  <g id="marker">
    <circle class="progress marker" cx="148" cy="13" r="10" style="filter: url(#markerShadow)" />
    <polygon class="arrow" points="146.5,18.1 145.1,16.7 149.1,12.5 145.1,8.7 146.5,7.3 151.9,12.5  " />
  </g>
</svg>

Answer 1

I'm putting the marker in the <defs> making sure it has the center in the point 0,0. For this I'm translating the group transform="translate( -148, -13)"

Now I can use the group with <use> . The use element can take ax and y attributes. You can set the values for x and y to coincidewith the cx and cy of the dots.

 circle{fill:gold}

 <svg id="timeline" width="250px" viewBox="0 0 230 26" > <defs> <filter id="markerShadow"> <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="#0000ff" flood-opacity="0.5" /> </filter> <g id="marker" transform="translate( -148, -13)"> <circle class="progress marker" cx="148" cy="13" r="10" style="filter: url(#markerShadow)" /> <polygon class="arrow" points="146.5,18.1 145.1,16.7 149.1,12.5 145.1,8.7 146.5,7.3 151.9,12.5" fill="white" /> </g> </defs> <g id="seg3"> <path class="empty" d="M218,6h-70v14h70c3.9,0,7-3.1,7-7S221.9,6,218,6z" /> </g> <g id="seg2"> <rect x="77" y="6" class="empty" width="71" height="14" /> </g> <g id="seg1"> <path class="empty" d="M7,6c-3.9,0-7,3.1-7,7s3.1,7,7,7h70V6H7z" /> </g> <circle id="dot4" class="dot" cx="218" cy="13" r="5" /> <circle id="dot3" class="dot" cx="148" cy="13" r="5" /> <circle id="dot2" class="dot" cx="78" cy="13" r="5" /> <circle id="dot1" class="dot" cx="7" cy="13" r="5" /> <use xlink:href="#marker" x="218" y="13" /> </svg>