将 svg 缩放为屏幕的宽度答案

【问题标题】：scaling an svg to be the width of the screen将 svg 缩放为屏幕的宽度
【发布时间】：2015-10-03 13:20:14
【问题描述】：

我有一个巨大的 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%);

}

【问题讨论】：

为什么在你想看的东西上不显示？
How to make a <svg> element expand or contract to its parent container? 的可能重复项
@Paulie_D：抱歉，我已经删除了那条 css 行——它在我的程序中被 jquery 删除了。
链接的答案对我不起作用。有人可以帮忙吗？
答案在这里：stackoverflow.com/questions/5643254/…

标签： css svg

【解决方案1】：

试试这个 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>

【讨论】：