You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用经纬度坐标的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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.01 01:35:17