CSS SVG改變顏色

SVG格式的圖形具有可伸縮的矢量圖形特性，很多網(wǎng)站都使用SVG圖標來提高頁面效果。CSS可以輕松對SVG圖標進行顏色和其他視覺屬性的更改，以滿足設(shè)計和用戶的需求。

使用CSS改變SVG顏色的方法

通過CSS，我們可以使用fill屬性來改變SVG圖標的顏色。

下面是一個簡單的例子，我們通過為SVG添加CSS樣式來更改顏色：

/* CSS code */
svg {
width: 50px;
height: 50px;
}
svg path {
fill: red;
}

在上面的例子中，我們使用CSS選擇器來找到path元素，然后將其fill顏色設(shè)置為紅色。

使用CSS變量改變SVG顏色的方法

我們還可以使用CSS變量來改變SVG顏色。這樣做的優(yōu)點是我們可以在整個網(wǎng)站中重復使用顏色。創(chuàng)建一個CSS變量非常簡單，只需要在根選擇器中定義它，然后在需要使用它的任何地方引用即可。

:root {
--primary-color: #008080;
}
svg path {
fill: var(--primary-color);
}

在上面的例子中，我們定義了一個變量--primary-color，并將其值設(shè)置為#008080。然后我們對path元素應用這個變量，以便使用在其他地方統(tǒng)一管理的主要顏色。

總結(jié)

使用CSS可以幫助我們在不需要重復創(chuàng)建新的SVG圖標的情況下改變現(xiàn)有SVG的顏色。我們可以使用CSS屬性或變量來控制SVG圖標的顏色，從而更快地構(gòu)建網(wǎng)站，并且減少了代碼量。