Question

我试图获得路径的总长度，这基本上是一条直线： https://jsfiddle.net/36u7Lztv/9/

结果大约为312，与我的手动计算大致相同。

但是，如果我添加更多中间点（视觉上应该仍然是一条直线）： https://jsfiddle.net/36u7Lztv/8/

结果现在是347 ...任何想法为什么会这样？以下是我从其他帖子中借用的代码进行测试。

谢谢！

HTML：

<svg  width="1023.5735" height="339.87985" viewBox="0 0 1023.5737 339.87985" >            
        <path id='lens_right' class='lens'
            d="M 103.25 46.88 C 103.25 46.88 188.38 347.46 188.38 347.46" stroke="blue" fill="transparent" />"
</svg>

<p id="log">
  path length:
</p>

CSS：

svg {
  width: 50%;
}

svg path {
  fill: #000000;
  fill-opacity: 1;
  stroke: #ffffff;
  stroke-width: 10;
  transition: all 3s linear;
}

使用Javascript：

var path1 = document.getElementById('lens_right');
var path1Len = path1.getTotalLength();

var strokeLen = path1Len; // easier troubleshooting

document.getElementById('log').innerHTML = 'path length: ' + path1Len;

path1.style.strokeDasharray = strokeLen;
path1.style.strokeDashoffset = -strokeLen;

// add/remove border on hover
document.body.onmouseover = function() {
    path1.style.strokeDashoffset = '0';
}

document.body.onmouseout = function() {
    path1.style.strokeDashoffset = -strokeLen;
}

Answer 1

不，你的第二个例子不是一条直线。它由两条独立的路径组成。第二个是

M 183.64,330.72 C 197.83,380.81 193.1,364.13 188.38,347.46

三次贝塞尔曲线中间点超出终点，并且路径在返回193.1,364.13之前循环到（约）188.38,347.46。

path.getTotalLength（）似乎返回错误的值？

1 个答案: