SVG中如何让组内元素相对于组定位 实现时间轴marker自由移动

核心原因 #

SVG的<g>（组）元素本身不支持x、y属性，你直接给组设置x/y当然不会生效，要实现组的整体位移，需要用transform属性的translate位移能力。该需求完全可以在单个SVG文件内实现，无需拆分文件。

最优实现方案 #

你可以把组内元素的坐标调整为相对于组自身原点的相对坐标，后续只要修改组的translate参数就能直接整体移动，对齐圆点只要直接传入目标圆点的cx值即可，逻辑最简单：

1. 把当前marker组内元素的所有坐标减去基准坐标（当前基准是x=148，y=13），让组的原点和marker的中心对齐
2. 给marker组加transform="translate(148,13)"属性，初始位置和原来一致
3. 后续要移动时，直接修改translate的第一个参数为目标圆点的cx值即可

修改后的marker组代码示例 #

<g id="marker" transform="translate(148,13)">
  <!-- 原cx=148减148得0，原cy=13减13得0 -->
  <circle class="progress marker" cx="0" cy="0" r="10" style="filter: url(#markerShadow)" />
  <!-- 所有point的x减148，y减13 -->
  <polygon class="arrow" points="-1.5,5.1 -2.9,3.7 1.1,-0.5 -2.9,-4.3 -1.5,-5.7 3.9,-0.5  " />
</g>

Angular中动态控制方法 #

直接用Angular的属性绑定绑定transform属性即可，示例如下：

1. 组件内定义变量markerX = 148，默认对齐dot3
2. 模板中给marker组绑定属性：

<g id="marker" [attr.transform]="'translate(' + markerX + ',13)'">

3. 需要对齐其他圆点时，直接给markerX赋值对应圆点的cx值即可：

• 对齐dot1：this.markerX = 7
• 对齐dot2：this.markerX = 78
• 对齐dot4：this.markerX = 218

内容的提问来源于stack exchange，提问作者Steve