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

【问题标题】：SVG: position group relative to other groupSVG：相对于其他组的位置组
【发布时间】：2021-12-25 02:09:07
【问题描述】：

我正在制作一个时间线组件：

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

我希望能够根据 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>

【问题讨论】：

我刚试了一下，圆圈还在x148处。

标签： javascript svg

【解决方案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>

【讨论】：