放大交互式地图-特别是svg

Question

我已经使用这个教程- http://www.netzgesta.de/mapper/创建了一个交互式地图(http://teamworksdesign.com/clients/neurosign/contact/alabama/)，问题是我想把它放大10-20%，以便更好地填充空间。

我使用了这两张图片：

​

​

和svg：

http://teamworksdesign.com/clients/neurosign/wp-content/themes/default/images/usa_map.svg

显然，png很容易在PS中放大，但是如何在保持所有坐标不变的情况下放大svg呢？

更新:在svg上更改下面这一行不会影响svg的大小，悬停状态只是保持原始大小不变：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">

Answer 1

SVG是一种矢量格式。因此，如果您只需将root-element上的width和height属性分别更改为100%，并将视区保留为原始的像素值，那么在解析器重新计算每个坐标时，它将填充可用的空间。现在，显示图片的大小取决于它嵌入的位置。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">

此外，我会使用CSS (例如polygon:hover { fill: #32cd32; })，而不是使用JavaScript来实现悬停效果。

Answer 2

更改宽度和高度(以像素为单位)，但保持viewBox不变。例如，要使大小加倍：

<svg width="832px" height="550px" viewBox="0 0 432 275" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">