css怎么改變svg顏色

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

什么是css

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

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

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

示例：

<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顏色”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！