React开发仪表盘时如何将SVG marker小圆定位在绿色圆弧路径端点

问题根因 #

marker-end默认绑定的是SVG路径的原始几何终点，不会跟随stroke-dasharray生成的截断进度位置移动，因此会一直停在整个圆弧的最右端，不会跟着绿色进度走。

解决方案 #

推荐优先用方案1，完全适配你React动态传百分比的需求，没有兼容性问题，也不需要依赖marker的特殊属性。

方案1：单独绘制终点圆点 #

不需要依赖marker属性，直接根据传入的百分比计算圆弧终点坐标，单独绘制白色带绿边的圆点，动态适配性最强。
修改后代码示例：

<div style="width:400px">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <!-- 灰色背景圆弧 -->
    <path d="M20,60a35,35 0 1,1 60,0" stroke="#D3D7DB" stroke-width="4" fill="none" stroke-linecap="round"></path>
    <!-- 绿色进度圆弧，75可替换为你React组件传入的百分比props -->
    <path d="M20,60a35,35 0 1,1 60,0" stroke="#008000" stroke-width="6" pathLength="100" fill="none" stroke-linecap="round" stroke-dasharray="75 35"></path>
    <!-- 终点圆点，坐标可根据百分比动态计算：
    圆弧圆心坐标为(50,60)，半径35，总弧度为π
    百分比为p时，终点x=50 + 35 * cos(π - p/100 * π)，y=60 - 35 * sin(π - p/100 * π)
    -->
    <circle cx="77.5" cy="26.3" r="4" fill="#FFFFFF" stroke="#008000" stroke-width="2"/>
  </svg>
</div>

方案2：最小改动适配现有marker逻辑 #

如果不想额外计算坐标，只需要调整marker参数和绿色路径的描边配置即可：

<div style="width:400px">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <marker
        id="dot"
        viewBox="0 0 10 10"
        refX="5"
        refY="4"
        markerWidth="8"
        markerHeight="8"
        orient="auto"
      >
        <circle
          cx="4"
          cy="4"
          r="2"
          fill="#FFFFFF"
          stroke="#008000"
          stroke-width="2"
        />
      </marker>
    </defs>
    <path d="M20,60a35,35 0 1,1 60,0" stroke="#D3D7DB" stroke-width="4" fill="none" stroke-linecap="round"></path>
    <path d="M20,60a35,35 0 1,1 60,0" stroke="#008000" stroke-width="6" pathLength="100" fill="none" stroke-linecap="round" stroke-dasharray="75 100" marker-end="url(#dot)"></path>
  </svg>
</div>

两种方案都完全没有动画效果，截图插入PPT不会有任何问题。

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