SVG 和响应问题

Question

我的主页有问题 -> http://novustest.altervista.org/

地图在大屏幕上显示正确，但我想让它更灵活，如果我缩小 window 浏览器，我希望地图自动调整大小。我该怎么做？

这是我的代码，非常简单。我只有一个 html 页面和 2 个 js 文件。

这是我的 HTML 页面：

!DOCTYPE html>
<style>
.italy{
    width: 100%;
    height: auto;
    overflow: hidden;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
</style>

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="myMap" class="italy">

        </div>
        <script src="raphael-min.js"></script>
        <script src="map.js"></script>
    </body>
</html>

这是 jsfiddle 的 link 但它不起作用...

https://jsfiddle.net/ye0b2qvp/1/

Answer 1

您的 SVG 中嵌入了样式，使其分辨率为 1920x1080。

有关此事的更多说明，请参阅 this article。

Answer 2

在 svg 标签中添加 preserveAspectRatio 属性并使用 viewBox

在此处查看：

https://jsfiddle.net/fm024028/2/

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1500 600" ...

SVG 和响应问题

SVG and Responsive issue

javascript

css

svg

raphael

responsive-design