我正在网站上放置一张 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% 高度,并在宽度两侧留下空间。但我希望这个特定的 map 缩放到屏幕宽度的 100% 并在高度上溢出。
我已经尝试过:
- 设置 svg 元素内的宽度
- 忽略高度!在 svg 文件和 css 中
- preserveaspectratio 的多种用途以及 View 框,包括none,这是宽度唯一一次达到 100%,尽管高度发生了扭曲。
非常感谢您的帮助!
最佳答案
您可能想要的是将 preserveAspectRatio
指定为 svg 上的 slice
,并且仅指定宽度
在 CSS 中。
通过在 svg 上仅设置宽度(而不是高度),浏览器将自动保持宽高比。
您可能还想在 CSS 中将 min-height
设置为 100%。
(我添加了红色边框来查看发生了什么)
.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>
关于html - 我想将 svg 图像的大小调整为屏幕宽度的 100%。然后高度应该溢出,保持原始的高/宽比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21274315/