这是我在工具提示interactive map上的第3个跟进问题 .
原始 Map 使用美国州坐标 . 我正在尝试 Build 一个欧洲 Map (因此我的previous question排除了一些多边形悬停以绘制大陆的物理形状,但仅允许工具提示仅在欧盟成员之上) .
在我的工作中,我最初的灵感来自Peter Collingridge svg tutorial,其中大多数国家多边形在 svg paths
中表达 . 对于 SVG maps SVG maps 他正在为维基媒体提供建议,在那里我找到了一个非常明确的country paths Firefox Mozilla Europe map .
一切顺利,直到我偶然发现两个国家:俄罗斯和英国 .
在原始USA dataset偶数由多个多边形组成的状态(如Massachusets)用一个唯一的 d: 属性表示 .
{id:"MA",n:"Massachusets", d:"M899.62349,(...), 153.35923L855.45082,152.06593Z"},
而上述英国和俄罗斯则以两种截然不同的方式表达:
<g id="ru" transform="matrix(1.43317, 0, 0, 1.43317, -2435.49, -1086.58)">
<path id="ru-main" d="M 9462.6109,(...),2763.2929 z "/>
<path id="ru-kgd" d="M 6989.6109,(...),3728.389 z "/>
</g>
加上有这个属性 transform = "matrix(...)"
我通过在Mozilla Firefox Map 中应用_751612解决了这个问题俄罗斯由两条带有两个独立ID的路径组成: id="ru-main"
和 id="ru-kgd"
对于 UK 同样的事情 .
我想确保每当用户徘徊在俄罗斯大陆或加里宁格勒大道上方时,俄罗斯的整个领土都会突出显示 .
有办法吗?
1 回答
你想要做的是在国家(
<g>
)级别观看鼠标事件,并将悬停效果应用于所有悬停的<g>
的子元素<path>
元素 .这是一个working example使用类似于您的问题中提供的数据结构 .