拉斐尔SVG路径的一部分卡在原地

part of raphael svg path is stuck in place

本文关键字：一部分 原地 路径 SVG      更新时间：2023-09-26

我正在使用 raphael 测试（手的）向量.js我的印象是"M"参数指示从哪里开始绘制路径，但在我的示例中：http://jsfiddle.net/7QA43/1/当我更改 M 的参数（从 361，243 到 100，100）时，似乎小指的一部分是如何"锚定"到原始位置的。

我已经扫描了 svg 路径数据以查找可能导致此问题的内容，但我找不到它。

部分路径会偏离吗？

在 SVG 路径中，所有路径命令都有两种类型：绝对和相对。

  • 绝对路径命令由大写字母表示，并指示指定的坐标，而不考虑前一点。
    • 相对路径命令
  • 由小写字母表示，并指示相对于上一个路径命令的位置指定的坐标。

除最后一个 CurveTo 命令外，所有路径命令都是相对的：
"...44-1.436,3.662-2.155C357.073,245.799,359.609,244.566,361.839,243.057z"

从规格：

使用 （x1，

y1） 作为曲线开头的控制点，使用 （x2，y2） 作为曲线末端的控制点绘制从当前点到 （x，y） 的三次贝塞尔曲线。C（大写）表示绝对坐标将遵循;c（小写）表示相对坐标将遵循。可以指定多组坐标来绘制波利贝塞尔。在命令结束时，新的当前点将成为聚贝塞尔中使用的最终 （x，y） 坐标对。

最简单的解决方法是从路径中删除此命令，几乎没有明显的区别：

通过删除修复：http://jsfiddle.net/7QA43/2/

或者，不要使用第一个 MoveTo 命令来调整路径的位置。保持路径原样，并将其transform()到新位置：

path_a.transform('t-200,-154');

通过变换修复：http://jsfiddle.net/7QA43/5/

通过在有问题的 CurveTo 之前查找命令的最后一个坐标并更改参数以使用相对值来解决此问题，这是留给读者的练习。

相关文章：