我們可以使用CSS來為SVG圖形添加樣式。給SVG圖形添加樣式就是改變它們的外觀，可以修改描邊顏色和寬度，填充顏色，透明度等等。
我們可以使用6種方式來為SVG圖形添加樣式。我們將會在本文介紹這6種方式，文章的最后會給出所有可以在SVG上使用的CSS屬性。
SVG圖形可以使用的CSS屬性和HTML元素可以使用CSS屬性稍微有一些不同，但是絕大部分的屬性還是相同的。
使用屬性來添加CSS樣式
我們可以使用一些屬性來為SVG圖形添加樣式，例如stroke和fill屬性。下面是一個例子：
- <circle stroke="#000000" fill="#00ff00" />
這里有一系列的樣式屬性可以使用，但是建議使用內聯樣式表或外部樣式表來為SVG圖形添加樣式。
使用STYLE屬性
這個方法不使用屬性來添加樣式，而是使用style屬性，在它里面指定所需要的CSS樣式。如果你需要直接在SVG圖形中嵌入樣式，這個方法可以很好的滿足需求。這里的CSS屬性和內聯級外部CSS樣式表中的CSS屬性是相同的，你可以直接復制過來使用。
下面是一個使用style屬性的例子：
- <circle style="stroke: #000000; fill:#00ff00;" />
使用內聯樣式表
可以使用一個內聯樣式表為SVG圖形添加樣式。看下面的例子：
- <svg xmlns="http://www.w3.org/2000/svg">
-
- <style type="text/css" >
- <![CDATA[
-
- circle {
- stroke: #006600;
- fill: #00cc00;
- }
-
- ]]>
- </style>
-
- <circle cx="40" cy="40" r="24"/>
- </svg>
這種使用內聯樣式表的工作方式和在HTML元素上使用內聯樣式表是完全相同的。
內聯樣式表可以在IE7和Firefox 3.0.5瀏覽器上正常工作。
CLASS樣式
你還可以為每個圖形都添加一個class類，使用這個class類來在樣式表中作為選擇器選擇相應的圖形。
下面是一個例子，有兩個圓形，一個紅色一個綠色。分別為它們設置不同的class，并在樣式表中使用class來選擇圖形設置樣式。
- <svg xmlns="http://www.w3.org/2000/svg">
-
- <style type="text/css" >
- <![CDATA[
-
- circle.myGreen {
- stroke: #006600;
- fill: #00cc00;
- }
- circle.myRed {
- stroke: #660000;
- fill: #cc0000;
- }
-
- ]]>
- </style>
-
- <circle class="myGreen" cx="40" cy="40" r="24"/>
- <circle class="myRed" cx="40" cy="100" r="24"/>
- </svg>
使用外部樣式表
當你在使用外部樣式表的時候，樣式表是一個單獨的文件，這和CSS外部樣式表是相同的。你需要使用下面的語法來將外部樣式表引入。
- <?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
上面的代碼告訴SVG處理器到什么地方去查找svg-stylesheet.css文件。
下面是一個使用外部樣式表的例子，外部樣式表的聲明被放置在SVG文件中。
- <?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
- <svg xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
-
-
- <circle cx="40" cy="40" r="24"
- style="stroke:#006600; fill:#00cc00"/>
-
- </svg>
在HTML頁面中使用STYLE標簽
如果你將一個SVG嵌入到一個HTML頁面中，你可以在HTML頁面中使用style標簽來為SVG圖形設置樣式。例如：
- <html>
- <body>
-
- <style>
- </style>
-
- <svg>
- </svg>
-
- </body>
- </html>
要為SVG圖形設置樣式，只需要在style標簽中添加CSS屬性即可。這和在HTML頁面中對DOM元素設置樣式的方式是完全相同的。下面是一個例子：
- <html>
- <body>
-
- <style>
- circle {
- stroke: #006600;
- fill : #00cc00;
- }
- </style>
-
- <svg>
- <circle cx="40" cy="40" r="24" />
- </svg>
-
- </body>
- </html>
如果你將SVG直接嵌入HTML頁面，使用這個方法是最簡單直接的方法來為SVG圖形添加樣式。
樣式的優先級
如果你為一個SVG文件設置了內聯或外部樣式表，同時又設置了SVG內部的局部樣式，如果這些樣式產生了沖突，那么局部樣式會覆蓋內聯或外部樣式表中的樣式。
SVG的CSS樣式屬性
下面是一些你可以在SVG上設置的CSS屬性。并不是所有的元素都可以使用這些屬性。下面已經做好了分類。
圖形的CSS屬性
下面是<path>元素和其它SVG圖形元素的可用CSS屬性。
| CSS屬性 | 描述 |
| fill | 設置圖形的填充顏色 |
| fill-opacity | 設置圖形填充顏色的透明度 |
| fill-rule | 設置圖形的填充規則 |
| marker | 設置這個圖形上沿直線（邊）使用的marker |
| marker-start | 設置這個圖形上沿直線（邊）使用的開始marker |
| marker-mid | 設置這個圖形上沿直線（邊）使用的中間marker |
| marker-end | 設置這個圖形上沿直線（邊）使用的結束marker |
| stroke | 設置圖形的描邊顏色 |
| stroke-dasharray | 設置使用虛線來對圖形進行描邊 |
| stroke-dashoffset | 設置圖形描邊虛線的偏移值 |
| stroke-linecap | 設置描邊線條線頭的類型。可選擇有round, butt 和 square |
| stroke-miterlimit | 設置描邊的斜接限制 |
| stroke-opacity | 設置米哦啊吧的透明度 |
| stroke-width | 設置描邊的寬度 |
| text-rendering | 設置描邊的text-rendering屬性 |
| CSS屬性 | 描述 |
| alignment-baseline | 設置文本在x和y坐標系中的對齊方式 |
| baseline-shift | 設置文本的基線偏移 |
| dominant-baseline | 設置文本的主導基線 |
| glyph-orientation-horizontal | 設置水平字形取向 |
| glyph-orientation-vertical | 設置垂直字形取向 |
| kerning | 設置文本的字距調整 |
漸變的CSS屬性
| CSS屬性 | 描述 |
| stop-color | 設置漸變中stop元素的停止顏色 |
| stop-opacity | 設置漸變中stop元素的停止透明度 |
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506152043.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。