如何仅渲染SVG Path的指定百分比？寻求非虚线实现方案

嘿，我完全懂你不想用那种烂大街的虚线描边（dashed stroke）来做SVG路径动画的心情——那种方案总觉得有点“投机取巧”，而你想要的是精准贴合对象边缘的路径连接，这确实是个更优雅、更专业的思路！

核心思路：从对象边缘而非中心计算路径 #

既然你已经知道每个对象的中心坐标和宽度/半径，那我们完全可以通过几何计算，直接得出路径的起点和终点——让它们刚好落在两个对象的边缘上，根本不需要用虚线来“遮掉”多余的部分。

具体计算步骤很清晰：

• 先算出两个对象中心之间的向量：dx = x2 - x1，dy = y2 - y1
• 计算这个向量的长度（也就是中心之间的距离）：len = sqrt(dx² + dy²)
• 得到单位向量（用来表示方向）：ux = dx / len，uy = dy / len
• 第一个对象的边缘点：从中心往第二个对象的方向，移动半个宽度的距离 → (x1 + ux*(w1/2), y1 + uy*(w1/2))
• 第二个对象的边缘点：从中心往第一个对象的方向，移动半个宽度的距离 → (x2 - ux*(w2/2), y2 - uy*(w2/2))

用这两个边缘点绘制的路径，就会完美连接两个对象的边缘，没有任何多余的部分。

实战代码示例 #

比如我们有两个矩形对象，用这个方法生成连接路径：

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 两个矩形对象 -->
  <rect x="50" y="100" width="60" height="60" fill="#4CAF50" />
  <rect x="290" y="100" width="60" height="60" fill="#2196F3" />
  
  <!-- 计算后的边缘连接路径：从第一个矩形右边缘到第二个矩形左边缘 -->
  <path d="M 110 130 L 290 130" stroke="#FF9800" stroke-width="3" fill="none" />
</svg>

这里第一个矩形的中心是(80,130)，宽度60，所以右边缘点是80 + 1*(60/2) = 110；第二个矩形中心是(320,130)，左边缘点是320 - 1*(60/2) = 290，路径刚好贴合两个矩形的边缘。

动画实现（无虚线） #

如果要做路径动画，直接用完整路径的stroke-dasharray和stroke-dashoffset就行——因为路径本身就是边缘到边缘的，动画会完全沿着对象边缘延伸：

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="100" width="60" height="60" fill="#4CAF50" />
  <rect x="290" y="100" width="60" height="60" fill="#2196F3" />
  
  <path id="connectPath" d="M 110 130 L 290 130" stroke="#FF9800" stroke-width="3" fill="none"
        stroke-dasharray="180" stroke-dashoffset="180">
    <!-- 动画从路径全长到0，实现从左边缘画到右边缘的效果 -->
    <animate attributeName="stroke-dashoffset" from="180" to="0" dur="2s" fill="freeze" />
  </path>
</svg>

这里路径长度是290-110=180，把stroke-dasharray设为路径全长，让stroke-dashoffset从全长降到0，动画就会精准地从一个对象边缘延伸到另一个对象边缘。

拓展到不规则对象 #

如果是圆形、椭圆这类对象，计算逻辑是一样的——把“宽度的一半”换成“半径”就行，比如圆形的边缘点就是中心加上单位向量乘以半径，完全适配。

这种方案的好处就是完全摆脱了虚线的限制，路径本身就是精准的边缘连接，不管是静态展示还是动画效果，都显得更整洁专业。

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