SVG：相对于其他组的位置组

Question

我正在制作时间轴组件：

“标记”（带箭头的圆圈）是一个圆圈内有路径的组。

我希望能够根据需要使用 JS 将标记移动到与其他白色圆圈重合的位置 (Angular)，但是圆圈和路径使用的是从整个 SVG 的左上角定位— 我似乎无法移动标记组的 X 位置。

如果我设置组的 X，则里面的图稿会保留在创建时的位置。

这可以在一个 SVG 文件中实现吗？我将如何创建一个标记，其中圆圈和路径相对于组的左上角？

<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

我将标记放在 <defs> 中，确保它的中心位于点 0,0。为此，我正在翻译小组 transform="translate( -148, -13)"

现在我可以和 <use> 一起使用群组了。 use 元素可以采用 x 和 y 属性。您可以将 x 和 y 的值设置为与点的 cx 和 cy 重合。

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>

SVG：相对于其他组的位置组

SVG: position group relative to other group

javascript

svg