我有一个巨大的 svg。我想将它缩放为 100% 宽(屏幕的宽度)。请问最好的方法是什么？
html:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1368px"
height="775px" viewBox="0 0 1368 775" enable-background="new 0 0 1368 775" xml:space="preserve">
...
CSS:
.svg {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%); /* center */
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
最佳答案
试试这个 SVG 标题，包裹在 <div> 周围使用 CSS 控制宽度和高度。
<body>
<div style="width: 100%; height: 100%">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1368 775" enable-background="new 0 0 1368 775" xml:space="preserve">
...
</svg>
</div>
</body>
关于css - 将 svg 缩放为屏幕的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31414511/