css怎么改變svg顏色

這篇文章主要介紹css怎么改變svg顏色，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

什么是css

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進行格式化。

在css中，可以使用stroke屬性改變svg顏色，只需要給svg中的polyline標(biāo)簽設(shè)置“stroke:顏色值”樣式即可。stroke屬性定義一條線，文本或元素輪廓顏色，值和color一樣，支持rgba透明通道。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

有些時候我們也許會使用css直接操控svg，svg可以像jpg,png那樣以圖片形式使用，也可以直接以標(biāo)簽形式使用。前者不可以設(shè)置顏色，而后者可以。

示例：

<svg width="8px" height="12px" viewBox="0 0 8 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>Rectangle 8 Copy 10</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <polyline id="Rectangle-8-Copy-10" stroke="#8F99AE" stroke-width="2" transform="translate(2.242641, 6.242641) scale(1, -1) rotate(-135.000000) translate(-2.242641, -6.242641) " points="5.24264069 9.24264069 -0.757359313 9.24264069 -0.757359313 3.24264069 -0.757359313 3.24264069"></polyline>
    </g>
</svg>

效果：

加入改變顏色的代碼

 svg g polyline {
    stroke: red;
}

效果：

以上是“css怎么改變svg顏色”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！