我想将 svg 图像的大小调整为屏幕宽度的 100%。高度然后应该溢出保持原始的高度/宽度比答案

【问题标题】：I want to resize an svg image to 100% of screen width. Height should then overflow keeping the original height / width ratio我想将 svg 图像的大小调整为屏幕宽度的 100%。高度然后应该溢出保持原始的高度/宽度比
【发布时间】：2014-02-12 00:03:34
【问题描述】：

我在网站上放置了一个 svg 世界地图（我在代码中只留下了一个路径（国家/地区））：

.mapcontainer {height: 120%; width: 100%;}

<div class="mapcontainer">
  <svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 620">
    <path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" />
  </svg>
</div>

根据我对 viewBox 属性的上述语法的研究，应该使 SVG 缩放以填充屏幕或容器，但它会达到 100% 的屏幕高度并在宽度的两侧留出空间。但我希望这张特殊的地图可以缩放到 100% 的屏幕宽度并在高度上溢出。

我试过了：

在 svg 元素内设置宽度
使用 ! 忽略高度在 svg 文件和 css 中
preserveaspectratio 与视图框一起多次使用，包括 none，这是唯一一次宽度达到 100%，尽管高度扭曲。

非常感谢您的帮助！

【问题讨论】：

我看到 div 没有关闭，不明白为什么 xml-utf 存在“空间”。可以向我们展示更多您的代码吗？..谢谢
谢谢弗朗西斯。我删除了不必要的代码并添加了其余代码。
我删除了 viewBox 并在 svg 中包含了 width="950" 和 height="620"。我没有评估的所有路径，但对我来说看起来不错。

标签： html css svg

【解决方案1】：

您可能想要在 svg 上将 preserveAspectRatio 指定为 slice，并且仅在 css 中指定 width。

通过在 svg 上仅设置宽度（而不是高度），浏览器将自动保持纵横比。

您可能还想在 CSS 中设置 100% 的 min-height。

（我添加了一个红色边框以查看发生了什么）

.mapcontainer {width: 100%;}

<div class="mapcontainer">
  <svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 620"
  preserveAspectRatio="xMidYMin slice">
    <rect fill="red" x="0" y="0" width="950" height="620" />
    <rect fill="white" x="10" y="10" width="930" height="600" />
    <path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" />
  </svg>
</div>

【讨论】：

【解决方案2】：

CSS 中有一个新的度量单位，称为 vw 或视口宽度——您可以通过将其样式设置为 height:120vw 来固定纵横比，只要它填充 100% 的视口宽度即可。

【讨论】：

【解决方案3】：

我在 svg 中添加了一个矩形，以查看它是如何填充 div 的。然后我使用了innerWidth/innerHeight来设置svg的宽高：

 document.addEventListener("onload", init(), false)

 function init() {
   var svgW = window.innerWidth
   var svgH = window.innerHeight
   svg2.setAttribute("width", svgW)
   svg2.setAttribute("height", svgH)
 }

<body style='font-family:arial;overflow:hidden;'>
  <div style="position:absolute;top:0px;left:0px;background-color:lightgreen">
    <svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="0" y="0" fill="lightblue" width="100%" height="100%" />
      <path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" />
    </svg>
  </div>
</body>

【讨论】：

感谢您的帮助！恐怕我不明白如何处理第二个代码块。这是什么？