Javascript path.getTotalLength（）返回错误的值

我最近一直在玩svg动画。更具体地说，我只是想得到画线本身的效果。到目前为止，这是有道理的，但我有一些问题

在复杂形状上，

getTotalLength（）

返回的值似乎是错误的。它通常说路径比实际长度长

在本例中，路径（在我的屏幕上）约为报告的一半：

HTML:

Javascript:

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

var strokeLen = path1Len; // easier troubleshooting

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;
}

在开始绘制边界之前，您会注意到有一点延迟

使用

strokeLen

的值（例如，将

path1Len

除以2）可以使行的起点更接近正确的位置，但在不同的设备和分辨率上，这样的硬编码可能并不准确

无论使用何种浏览器，我都会得到相同的结果。我发现几年前的一些老的Firefox bug报告也涉及到这个问题，但他们说它已经修复了，并且提到这不是Chrome的问题

---

有人知道此问题的解决方法吗？

您的问题是由于您正在使用：

vector-effect: non-scaling-stroke;

使用此选项意味着正在变换路径，但笔划（以及dasharray）没有变换

如果删除

矢量效果

，并使

笔划宽度

更大（因此可见），则会得到更好的结果。尽管你现在仍然需要解决一些其他问题

---

您的问题是由于您正在使用：

vector-effect: non-scaling-stroke;

使用此选项意味着正在变换路径，但笔划（以及dasharray）没有变换

如果删除

矢量效果

，并使

笔划宽度

更大（因此可见），则会得到更好的结果。尽管你现在仍然需要解决一些其他问题

vector-effect: non-scaling-stroke;