如何使 SVG 不拉伸？答案

【问题标题】：How to make SVG not stretch?如何使 SVG 不拉伸？
【发布时间】：2020-04-09 06:38:05
【问题描述】：

我有一个 SVG 背景，并且在 SVG 背景顶部有一个固定的白框。当我使浏览器尺寸高度变大时，SVG 也会扩展，从而在白框和 svg 之间产生巨大的空间。如何阻止 svg 从浏览器大小扩展？

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1441 668" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 60.1 (101010) - https://sketch.com -->
    <desc>Created with sketchtool.</desc>
    <g id="Asset-Artboard-Page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="bg-bg-new" transform="translate(0.975610, 0.000000)">
            <g id="bg-geo" transform="translate(0.000000, 0.000000)">
                <rect id="bg" fill="#279BE8" x="0" y="0" width="1440" height="668"></rect>
                <polygon id="green" fill="#44CF50" points="680 668 -7.54951657e-14 320 0 668"></polygon>
                <polygon id="blue-light" fill="#FFFFFF" points="364 0 0 264 0 0"></polygon>
                <polygon id="blue-dark" fill="#103C63" points="136 668 798 188 1440 518 1440 668"></polygon>
                <polygon id="blue-light" fill="#E6F9FC" points="987 668 1440 340 1440 668"></polygon>
            </g>
        </g>
    </g>
</svg>

【问题讨论】：

尝试为您的 svg 元素设置固定宽度和高度

标签： css angular svg

【解决方案1】：

在svg 容器上使用固定的宽度和高度。如果未设置宽度和高度，svg 将采用父级的尺寸。

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1441 668" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
    <!-- Generator: sketchtool 60.1 (101010) - https://sketch.com -->
    <desc>Created with sketchtool.</desc>
    <g id="Asset-Artboard-Page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="bg-bg-new" transform="translate(0.975610, 0.000000)">
            <g id="bg-geo" transform="translate(0.000000, 0.000000)">
                <rect id="bg" fill="#279BE8" x="0" y="0" width="1440" height="668"></rect>
                <polygon id="green" fill="#44CF50" points="680 668 -7.54951657e-14 320 0 668"></polygon>
                <polygon id="blue-light" fill="#FFFFFF" points="364 0 0 264 0 0"></polygon>
                <polygon id="blue-dark" fill="#103C63" points="136 668 798 188 1440 518 1440 668"></polygon>
                <polygon id="blue-light" fill="#E6F9FC" points="987 668 1440 340 1440 668"></polygon>
            </g>
        </g>
    </g>
</svg>

【讨论】：