时间戳

首页 > 解决方案 > 如何使 SVG 不拉伸？

css - 如何使 SVG 不拉伸？

问题描述

我有一个 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>

标签： cssangularsvg

解决方案

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>

推荐阅读