如何使SVG贴图响应其父元素的宽度

Question

我有SVG地图，并将其放置在 .container

问题是我无法将SVG的宽度始终设置为 .container 元素的宽度的100％。

所以如果我设置：

    .container {
      width: 500px;
    }

SVG地图被裁剪，部分不可见。

所需结果：

我希望它的行为类似于以下示例： https://www.amcharts.com/svg-maps/?map=austria

1。。当我放大或拖动地图时，可以将其裁剪掉。

2。。当我更改视口（例如，通过调整浏览器窗口的大小）时，它应该响应其父元素的宽度。

这是我的代码段：https://jsfiddle.net/marektchas/epxtuwvo/

另外一个注意事项-如果我使用viewbox（在任何配置中），整个结构都将损坏。