使用经纬度坐标的viewBox时,如何显示SVG的title提示?
经纬度坐标SVG的title悬停不显示问题
我需要创建一个用经纬度定义地标的SVG,每个地标嵌套<title>元素,实现鼠标悬停时显示对应提示文本。以下是简化示例:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="41.92510369301815 -73.38857966919343 0.004943773525909023 0.010611880004319119"> <rect width="0.0001" height="0.0001" x="41.92865062754184" y="-73.38096767127567"><title>0.002437043</title></rect> <rect width="0.0001" height="0.0001" x="41.928647149048246" y="-73.38095714784605"><title>0.002843217</title></rect> </svg>
实际场景中有成百上千个<rect>元素,从远处看它们构成赛车赛道的行驶轨迹。但在Firefox中,虽然rect能渲染(只是略模糊),但鼠标悬停时<title>的提示文本始终不显示。
我尝试手动将所有数值放大10000倍后,提示框就能正常显示,示例如下:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="419251.0369301815 -733885.7966919343 49.43773525909023 106.11880004319119"> <rect width="1" height="1" x="419286.5062754184" y="-733809.6767127567"><title>0.002437043</title></rect> <rect width="1" height="1" x="419286.47149048245" y="-733809.5714784604"><title>0.002843217</title></rect> <rect width="1" height="1" x="419286.4366962671" y="-733809.4655931061"><title>0.0032493907</title></rect> <rect width="1" height="1" x="419286.40189653775" y="-733809.3597362792"><title>0.0036555645</title></rect> <rect width="1" height="1" x="419286.36709271686" y="-733809.2544448508"><title>0.0040617385</title></rect> </svg>
放大后甚至可以手动修改x/y值,不再依赖viewBox。
想请教:这是不是小数精度问题导致的?我的操作有没有错误?或者有没有更规范的使用经纬度坐标绘制这类图形的方法?
补充:这些数据是模拟赛车赛道的行驶百分比采样点,用户需要通过鼠标悬停查看对应位置的赛道行驶进度。
内容的提问来源于stack exchange,提问作者fommil
相关产品推荐
相关产品推荐

