javascript - 在地图 svg 中自动放大

Question

我有一张 SVG 格式的地图。我想集成缩放和缩小功能。我使用了库 svg-pan-zoom，它对我很有帮助，但我没有找到允许我自动放大特定区域的功能。该地图包含欧洲的所有部门，我希望当我选择某些标准时自动缩放特定区域。如果您不知道另一个满足需求的库，svg-pan-zoom 是否允许我这样做？

Answer 1

我不熟悉svgpanzoom。但一般来说，您可以使用该viewBox属性缩放到 SVG 的特定区域。

考虑以下示例。这是一个带有 3 个矩形的简单 SVG。

<svg width="200" height="200" viewBox="0 0 200 200">
  <rect x="0" y="0" width="200" height="200" fill="red" />
  <rect x="100" y="50" width="50" height="50" fill="green" />
  <rect x="110" y="60" width="30" height="30" fill="blue" />
</svg>

现在，如果您想放大绿色矩形，只需将viewBox属性添加到您要放大到的区域的 x/y/width/height 即可。绿色矩形是 100/50/50/50。在这里看到它：https ://codepen.io/anon/pen/eyaggG

<svg width="200" height="200" viewBox="100 50 50 50">
  <rect x="0" y="0" width="200" height="200" fill="red" />
  <rect x="100" y="50" width="50" height="50" fill="green" />
  <rect x="110" y="60" width="30" height="30" fill="blue" />
</svg>

我希望这能帮到您