如何在SVG中正确将三次贝塞尔曲线的箭头标记移至中心

没问题，当然可以用marker实现三次贝塞尔曲线中心处箭头的正确定向显示——你遇到的偏移问题，大概率是marker的几个关键属性没配合好，和三次贝塞尔本身的特性无关。

核心问题分析 #

你提到修改refX时箭头直接向上偏移，而二次贝塞尔正常，本质原因不是三次贝塞尔的问题，而是你可能没理清marker的坐标系统逻辑：

• refX/refY是marker内部坐标系中的参考点，这个点会被对齐到路径上的标记位置（比如marker-mid对应的曲线中点）。
• orient="auto"（默认值）会让marker自动沿着路径在该点的切线方向旋转，这个特性对三次贝塞尔同样生效，不存在兼容性问题。

正确实现步骤 #

下面给你一个可直接复用的示例，一步步说明怎么配置：

1. 定义合适的marker
   重点是设置viewBox来限定marker的范围，然后把refX/refY设置为marker图形的中心（或你需要对齐的位置），同时确保orient="auto"：

   <defs>
     <!-- 箭头marker，viewBox包含整个箭头图形 -->
     <marker id="center-arrow" 
             viewBox="0 0 20 20" 
             refX="10" refY="10"  <!-- 对应viewBox的中心，也就是箭头的中心 -->
             markerWidth="12" markerHeight="12"
             orient="auto">
       <!-- 绘制一个中心在(10,10)的箭头 -->
       <path d="M0,10 L20,10 L16,6 L16,14 Z" fill="#ff4444"/>
     </marker>
   </defs>
   

2. 应用到三次贝塞尔曲线
   只需要给路径加上marker-mid="url(#center-arrow)"即可，marker-mid会自动定位到曲线的长度中点（不是控制点的几何中点，是沿曲线的真正中心）：

   <path d="M60,280 C180,80 320,280 380,120" 
         stroke="#333" stroke-width="3" 
         fill="none" 
         marker-mid="url(#center-arrow)"/>
   

为什么你之前的操作出错？ #

大概率是这两个原因：

• 你的marker没有设置viewBox，导致refX的参考系混乱，偏移方向不受控；
• 你的箭头图形的中心没有和refX/refY对应，比如箭头的尖端在marker的(0,0)，但你设置refX为箭头长度的一半，却没考虑refY的对齐，导致垂直方向偏移。

额外提示 #

如果想要箭头尖端对准曲线中心，只需要调整refX到箭头尖端的位置即可——比如把上面的箭头路径改成M10,0 L10,20 L14,16 L6,16 Z（尖端在(10,0)），然后把refX="10"、refY="0"，就能让尖端精准落在曲线中心，同时保持正确的切线方向。

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