将现有SVG图像映射转换为响应

Question

我从维基百科下载了印度的SVG地图。我想在我的网站上使用它，问题是地图没有响应。我想使其工作作为响应保持原始图像中的所有坐标/路径完整。

有了这个，我想在地图的任何屏幕大小的任何状态上调用click事件。

请检查地图http://jkcomdelhi.com/INDIA.svg

的链接

Answer 1

您需要覆盖width和height值。目前，它们与特定值硬连线。将它们更改为"100%"，这将使SVG图像扩展以填充其容器。

编辑SVG文件并更改：

<svg ... width="210mm" height="297mm"

为：

<svg ... width="100%" height="100%"

Answer 2

处理每个路径元素或所有svg元素example js fiddle

上的点击事件

document.getElementsByTagName('svg')[0].onclick = consoleLogOnClick;
function consoleLogOnClick(e) {
    console.log('click', e.target);
}

您可以在每条路径上指定data-attribute以显示特定值，例如州名称。