CSS改變SVG圖片大小的方法

在CSS中，我們可以使用width和height屬性來改變SVG圖片的大小，這些屬性可以設(shè)置為具體的像素值，或者設(shè)置為百分比，這將使圖片根據(jù)其父元素的大小自動縮放。

假設(shè)我們有一個SVG圖片，我們想要將其大小更改為200像素寬和300像素高，我們可以這樣寫CSS：

img[src$=".svg"] {
    width: 200px;
    height: 300px;
}

或者，如果我們想要將圖片的大小更改為其原始大小的50%，我們可以這樣寫：

img[src$=".svg"] {
    width: 50%;
    height: 50%;
}

這種方法僅適用于內(nèi)聯(lián)SVG圖片，對于嵌入式SVG圖片（即作為HTML文檔的一部分），我們需要使用不同的方法，在這種情況下，我們可以將SVG元素作為HTML文檔的一部分，并使用CSS來樣式化它。

<div class="svg-container">
    <svg>
        <!-- SVG內(nèi)容 -->
    </svg>
</div>

我們可以使用CSS來更改SVG容器的大?。?/p>

.svg-container {
    width: 200px;
    height: 300px;
}

或者，我們可以將SVG元素設(shè)置為響應(yīng)式的：

.svg-container {
    width: 100%;
    height: 100%;
}

這將使SVG圖片根據(jù)其父元素的大小自動縮放。