path.getToTallength()似乎返回错误的值



我正在尝试获得一条路径的总长度,这本质上是一条直线: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;
}

不,您的第二个示例不是直线。它由两个独立的路径组成。第二个是

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

最新更新