Javascript Safari上的SVG笔划绘制问题

我有一个路径，通过使用JS中的

getTotalLength（）

方法将

stroke dasharray

和

stroke dashoffset

设置为它的总长度

这将使笔划看起来不可见，这是我的意图

我在下面添加了一条复制的浅蓝色路径，作为路径外观的视觉辅助

问题是，在Safari中，笔划的一小部分位于路径的右侧

在演示中，我有3条路径，看起来是重复的，但它们的“路径”属性不同。第一个具有相对坐标和变换属性（Inkscape程序意外遗留）。第二个有绝对坐标。第三个有相对坐标

在Safari中，只有第一条路径正确隐藏其笔划

constpatha=document.querySelector（“.path-A”）；
const pathB=document.querySelector（“.path-B”）；
const pathC=document.querySelector（“.path-C”）；
setAttribute（“stroke dasharray”，pathA.getTotalLength（））；
setAttribute（“stroke dashoffset”，pathA.getTotalLength（））；
setAttribute（“stroke dasharray”，pathB.getTotalLength（））；
setAttribute（“stroke dashoffset”，pathB.getTotalLength（））；
setAttribute（“stroke dasharray”，pathC.getTotalLength（））；
setAttribute（“stroke dashoffset”，pathC.getTotalLength（））
svg{
显示：块；
}
路径格式设置为相对
还有Inkscape程序意外遗留的translate属性
在Safari中唯一正确隐藏的
路径格式设置为绝对
路径格式设置为相对

我认为问题与Safari和Edge（旧版）在

stroke dasharray

和

stroke dashoffset

上呈现十进制值有关，当它们从

getTotalLength（）方法设置时

Safari的修复方法是使用Math.ceil对值进行四舍五入

但是，对于边缘（传统），当笔划的其余部分放置在路径的左侧时，问题仍然存在


边的解决方案是在初始化时将笔划宽度设置为零，然后当笔划长度值更改（例如动画）时，将笔划宽度更改回其默认值


constpatha=document.querySelector（“.path-A”）；
const pathB=document.querySelector（“.path-B”）；
const pathC=document.querySelector（“.path-C”）；
设pathAStrokeWidth=0
设pathBStrokeWidth=0
设pathCStrokeWidth=0
setAttribute（“stroke dasharray”，Math.ceil（pathA.getTotalLength（））；
setAttribute（“stroke-dashoffset”，Math.ceil（pathA.getTotalLength（））；
pathAStrokeWidth=pathA.getAttribute（'笔划宽度'）
setAttribute（“笔划宽度”，0）；
setAttribute（“stroke dasharray”，Math.ceil（pathB.getTotalLength（））；
setAttribute（“stroke-dashoffset”，Math.ceil（pathB.getTotalLength（））；
pathBStrokeWidth=pathA.getAttribute（'stroke-width'）
设置属性（“笔划宽度”，0）；
setAttribute（“stroke dasharray”，Math.ceil（pathC.getTotalLength（））；
setAttribute（“stroke-dashoffset”，Math.ceil（pathC.getTotalLength（））；
pathCStrokeWidth=pathA.getAttribute（'stroke-width'）
路径设置属性（“笔划宽度”，0）；

svg{
显示：块；
}
路径格式设置为相对
还有Inkscape程序意外遗留的translate属性
在Safari中唯一正确隐藏的
路径格式设置为绝对
路径格式设置为相对

我认为问题与Safari和Edge（旧版）在

stroke dasharray

和

stroke dashoffset

上呈现十进制值有关，当它们从

getTotalLength（）方法设置时

Safari的修复方法是使用Math.ceil对值进行四舍五入

但是，对于边缘（传统），当笔划的其余部分放置在路径的左侧时，问题仍然存在


边的解决方案是在初始化时将笔划宽度设置为零，然后当笔划长度值更改（例如动画）时，将笔划宽度更改回其默认值


constpatha=document.querySelector（“.path-A”）；
const pathB=document.querySelector（“.path-B”）；
const pathC=document.querySelector（“.path-C”）；
设pathAStrokeWidth=0
设pathBStrokeWidth=0
设pathCStrokeWidth=0
setAttribute（“stroke dasharray”，Math.ceil（pathA.getTotalLength（））；
setAttribute（“stroke-dashoffset”，Math.ceil（pathA.getTotalLength（））；
pathAStrokeWidth=pathA.getAttribute（'笔划宽度'）
setAttribute（“笔划宽度”，0）；
setAttribute（“stroke dasharray”，Math.ceil（pathB.getTotalLength（））；
setAttribute（“stroke-dashoffset”，Math.ceil（pathB.getTotalLength（））；
pathBStrokeWidth=pathA.getAttribute（'stroke-width'）
设置属性（“笔划宽度”，0）；
setAttribute（“stroke dasharray”，Math.ceil（pathC.getTotalLength（））；
setAttribute（“stroke-dashoffset”，Math.ceil（pathC.getTotalLength（））；
pathCStrokeWidth=pathA.getAttribute（'stroke-width'）
路径设置属性（“笔划宽度”，0）；

svg{
显示：块；
}
路径格式设置为相对
还有Inkscape程序意外遗留的translate属性
在Safari中唯一正确隐藏的
路径格式设置为绝对
路径格式设置为相对

对于无法复制问题的用户，您可能需要在Safari中上传带有渲染的图片。我看到您已经设置了

stroke linecap=“round”

。这可能是一个错误