如何让SVG的<path>从中心而非左上角绘制？Chrome textPath问题

核心思路 #

不用viewBox（避免圆形缩放），通过JS动态计算视口中心，生成居中的圆形<path>，同时设置SVG铺满窗口，监听窗口尺寸变化实时更新路径位置。

实现步骤与代码示例 #

1. 设置全屏SVG
   将SVG的宽高设为100vw和100vh，确保背景铺满浏览器窗口，同时不添加viewBox属性，固定圆形尺寸：

   <svg width="100vw" height="100vh" style="background: #f0f0f0;">
     <!-- 路径定义与文本 -->
   </svg>
   

2. 动态生成居中圆形Path
   用JavaScript计算SVG视口的中心坐标，生成圆形路径的d属性（利用SVG的椭圆弧指令A绘制正圆），并监听窗口resize事件实时更新：

   <svg width="100vw" height="100vh" style="background: #f0f0f0;">
     <defs>
       <path id="circle-path" />
     </defs>
     <text font-size="24" font-family="Arial">
       <textPath href="#circle-path" startOffset="50%" text-anchor="middle">
         环绕圆形的居中文本
       </textPath>
     </text>
   </svg>
   
   <script>
   const svg = document.querySelector('svg');
   const circlePath = document.getElementById('circle-path');
   const fixedRadius = 150; // 固定圆形半径，按需调整
   
   function updateCenteredCircle() {
     // 计算当前SVG视口的中心坐标
     const centerX = svg.clientWidth / 2;
     const centerY = svg.clientHeight / 2;
     // 生成圆形Path的d属性：从右侧端点开始绘制顺时针整圆
     const pathD = `M ${centerX + fixedRadius}, ${centerY} 
                    A ${fixedRadius}, ${fixedRadius} 0 1 0 ${centerX - fixedRadius}, ${centerY} 
                    A ${fixedRadius}, ${fixedRadius} 0 1 0 ${centerX + fixedRadius}, ${centerY}`;
     circlePath.setAttribute('d', pathD);
   }
   
   // 初始化路径
   updateCenteredCircle();
   // 监听窗口尺寸变化，实时更新路径位置
   window.addEventListener('resize', updateCenteredCircle);
   </script>
   

3. 文本居中优化
   给textPath添加startOffset="50%"和text-anchor="middle"，让文本在圆形路径上居中显示，避免偏移。

关键细节说明 #

• 放弃viewBox确保圆形尺寸固定，不会随窗口缩放；
• 通过svg.clientWidth/clientHeight获取实时视口尺寸，计算中心坐标，保证圆形始终居中；
• 椭圆弧指令A的参数（两个半径相同、大弧标志设为1）确保绘制正圆，兼容Chrome的textPath渲染；
• 窗口resize事件监听保证窗口调整时路径实时更新，维持居中状态。

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