我們可以使用CSS設置SVG形狀的樣式。樣式是指改變形狀的外觀。這可以是筆觸顏色和寬度，填充顏色，不透明度和形狀的許多其他屬性。
有6種樣式可以設置SVG圖像中的形狀。每個都將在本文中介紹。在本文的結(jié)尾，您將找到可以與SVG一起使用的CSS屬性的列表。
是否可以使用特定的樣式屬性（例如stroke和fill）來樣式化SVG形狀。這是一個示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="40" cy="40" r="24" stroke="#000000" fill="#00ff00" /> </svg>測試看看?/?
雖然有一系列可用的樣式屬性。但是，建議您使用內(nèi)聯(lián)樣式表或外部樣式表，因此在這里我不會過多介紹樣式屬性。
此方法不使用任何特定于樣式的屬性。相反，它僅使用 style屬性并在其中指定CSS屬性。如果您需要直接在樣式中嵌入樣式，則此方法優(yōu)于特定屬性，因為您可以學習CSS屬性的名稱。內(nèi)部或外部樣式表中的CSS屬性都是相同的，因此復制粘貼和學習此類內(nèi)容更加容易。
這是一個通過style 屬性和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: #000000; fill:#00ff00;" /></svg>測試看看?/?
可以在嵌入式樣式表中定義形狀的樣式，然后將所有這些樣式自動應用到形狀。這是一個示例：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css" >
<![CDATA[
circle {
stroke: #006600;
fill: #00cc00;
}
]]>
</style>
<circle cx="40" cy="40" r="24"/>
</svg>測試看看?/?注意在<style>元素內(nèi)部如何定義circle元素的樣式。這與HTML和CSS中的工作方式相同。
內(nèi)部樣式表在Internet Explorer 7和Firefox 3.0.5中均能正常工作。
效果如下:
可以class將形狀中的屬性用于選擇該形狀的樣式，而不是將樣式應用于特定類型的所有形狀（例如，所有圓形）。就像class在HTML元素中使用屬性一樣。
這是兩個圓圈樣式的示例-綠色和紅色。<circle>使用以下class 屬性，將這兩種樣式中的每一種都應用于各自的元素 ：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<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>測試看看?/?請注意circle，樣式表中的選擇器名稱如何帶有.myGreen和后綴.myRed。現(xiàn)在，<circle>元素可以使用class="myGreen" 定義綠色或 class="myRed"定義紅色圓圈樣式。
使用外部樣式表時，樣式表會放在一個單獨的文件中，然后放在Web服務器上，就像HTML頁面的外部CSS文件一樣。另外，在<svg>元素之前，您需要在SVG文件中包含以下聲明：
<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
該處理指令告訴SVG查看器使用CSS樣式表找到文件“ 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>
注意：外部CSS樣式表在Internet Explorer 7中似乎可以正常工作，但在Firefox 3.0.5中則不能。
如果將SVG圖像嵌入HTML頁面中，則還可以將SVG圖像的樣式表嵌入HTML頁面中。這是一個示例：
<html> <body> <style> </style> <svg> </svg> </body> </html>測試看看?/?
要將樣式添加到SVG圖像內(nèi)的形狀，只需在style 元素內(nèi)添加常規(guī)CSS屬性即可。您可以使用通常用于HTML的CSS選擇器來設置SVG元素的樣式。這是一個HTML頁面，其circle元素通過HTML頁面中的CSS樣式表進行樣式設置：
<html>
<body>
<style>
circle {
stroke: #006600;
fill : #00cc00;
}
</style>
<svg>
<circle cx="40" cy="40" r="24" />
</svg>
</body>
</html>測試看看?/?如果將SVG圖像直接嵌入HTML頁面中，則這可能是設置SVG形狀樣式的最簡單方法。
如果已在樣式表中設置了樣式的樣式，則可以通過在要為其設置新樣式的形狀內(nèi)本地設置新的樣式屬性來覆蓋此樣式。在形狀內(nèi)部局部設置的樣式始終優(yōu)先于內(nèi)部或外部樣式表中定義的樣式。
SVG元素具有以下可以設置的CSS屬性。并非所有元素都具有所有這些CSS屬性。因此，CSS屬性被分為針對不同元素的多個表。
path元素和其他形狀元素的 CSS屬性：
| CSS屬性 | 描述 |
|---|---|
| fill | 設置形狀的填充顏色。 |
| fill-opacity | 設置形狀的填充不透明度。 |
| fill-rule | 設置形狀的填充規(guī)則。 |
| marker | 設置沿此形狀的線（邊）使用的標記。 |
| marker-start | 設置沿此形狀的線（邊）使用的開始標記。 |
| marker-mid | 設置沿此形狀的線（邊）使用的中間標記。 |
| marker-end | 設置沿此形狀的線（邊）使用的結(jié)束標記。 |
| stroke | 設置用于繪制此形狀輪廓的筆觸（線條）顏色。 |
| stroke-dasharray | 設置用于繪制此形狀輪廓的筆劃（虛線）。 |
| 設置用于繪制此形狀輪廓的筆劃（直線）破折號偏移量。 | |
| stroke-linecap | 設置用于繪制此形狀輪廓的筆劃（線）線帽。有效值為round，butt和square。 |
| stroke-miterlimit | 設置用于繪制此形狀輪廓的筆劃（直線）斜接限制。 |
| stroke-opacity | 設置用于繪制此形狀輪廓的筆觸（直線）不透明度。 |
| stroke-width | 設置用于繪制此形狀輪廓的筆觸（線條）寬度。 |
| text-rendering | 設置用于繪制此形狀輪廓的文本渲染。 |
text元素的 CSS屬性：
| CSS屬性 | 描述 |
|---|---|
| alignment-baseline | 設置文本與其對齊方式x和y坐標。 |
| baseline-shift | 設置用于呈現(xiàn)文本的基線偏移。 |
| dominant-baseline | 設置主要基線。 |
| glyph-orientation-horizontal | 設置水平字形方向。 |
| glyph-orientation-vertical | 設置垂直字形方向。 |
| kerning | 設置渲染文本的字距（字距是字母間距）。 |
SVG漸變的CSS屬性：
| CSS屬性 | 描述 |
|---|---|
| stop-color | 設置在漸變中使用的stop元素中使用的終止色。 |
| stop-opacity | 設置stop在漸變中使用的元素中使用的停止不透明度。 |