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

【问题标题】：Enlarge interactive map - specifically an svg放大交互式地图 - 特别是 svg
【发布时间】：2011-09-01 13:03:03
【问题描述】：

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

我用过这两张图片：

还有 svg：

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

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

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

【问题讨论】：

标签： map svg

【解决方案1】：

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

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

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

【讨论】：

干杯。我在 Illustrator 中打开了 svg，然后将其拖到正确的大小。上传了，但是当我尝试页面时，坐标仍然映射到旧尺寸。
我不知道 Illustrator 或“将其拖到正确的大小”是什么意思。您不需要为 SVG 指定特定大小。请确保您了解difference between vector (e.g. SVG, AI) and bitmap (e.g. PNG, JPEG) graphics。我刚刚在 Chromiums Inspector 中更改了宽度和高度，文本编辑器也可以工作……
好的，我已经尝试在 textedit 中编辑 svg 并更改了行 - '
“悬停状态仍然是原始大小”我无法在任何浏览器中重现。
如果您有机会截取您的更改内容，这将是一个很大的帮助。我认为有些东西可能会压倒它，因为当我进行更改时，您建议地图不会变大。

【解决方案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">

【讨论】：