Question

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

}

Answer 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>

将svg缩放为屏幕的宽度

1 个答案: