diff --git a/dsLightRag/ChangZheng/1.html b/dsLightRag/ChangZheng/1.html index 50fc1710..3ac97b50 100644 --- a/dsLightRag/ChangZheng/1.html +++ b/dsLightRag/ChangZheng/1.html @@ -117,30 +117,25 @@ // 获取SVG路径的总长度 const pathLength = route.getTotalLength(); - // 计算SVG坐标系到页面坐标系的转换比例 - function getScaleFactor() { - const viewBox = route.viewBox.baseVal; - const svgRect = route.closest('svg').getBoundingClientRect(); - return { - x: svgRect.width / viewBox.width, - y: svgRect.height / viewBox.height - }; - } - // 根据进度百分比获取路径上的点 function getPointOnPath(percent) { const distance = percent * pathLength / 100; const point = route.getPointAtLength(distance); - const scale = getScaleFactor(); - // 获取SVG元素相对于页面的位置 - const svgRect = route.closest('svg').getBoundingClientRect(); + // 将SVG坐标转换为页面坐标 + const svgPoint = route.ownerSVGElement.createSVGPoint(); + svgPoint.x = point.x; + svgPoint.y = point.y; + + const matrix = route.ownerSVGElement.getScreenCTM(); + const transformedPoint = svgPoint.matrixTransform(matrix); + + // 转换为相对于#map容器的坐标 const mapRect = map.getBoundingClientRect(); - // 计算红旗在页面上的位置 return { - x: svgRect.left - mapRect.left + point.x * scale.x, - y: svgRect.top - mapRect.top + point.y * scale.y + x: transformedPoint.x - mapRect.left, + y: transformedPoint.y - mapRect.top }; }