SVG和CSS-级联样式表
可以使用CSS设置SVG形状的样式。造型是指改变形状的外观。这可以是笔触颜色和宽度，填充颜色，不透明度以及形状的许多其他属性。
有6种方法可以在SVG图像中设置形状的样式。每个都将在本文中介绍。在本文的结尾，我们将找到可以与SVG一起使用的CSS属性的列表。
本文假定我们熟悉CSS。如果我们还没有，我也有CSS教程，该教程在HTML上下文中解释CSS(也使用CSS)。 SVG元素的CSS属性有时与HTML元素的CSS属性不同，但是总体原理保持不变。
使用属性的CSS样式
是否可以使用" stroke"和" fill"之类的特定样式属性来对SVG形状进行样式设置。这是一个例子：
<circle stroke="#000000" fill="#00ff00" />
有一系列可用的样式属性。但是，建议我们使用内联样式表或者外部样式表，因此在这里我不会过多介绍样式属性。
使用style属性和CSS属性
此方法不使用任何特定于样式的属性。相反，它仅使用style属性，并其中指定CSS属性。如果我们需要直接在样式中嵌入样式，则此方法优于特定属性，因为我们可以学习CSS属性的名称。内部或者外部样式表中的CSS属性都是相同的，因此复制粘贴和学习此类内容更加容易。
这是通过" style"属性和CSS属性设置的笔触和填充相同的圆圈：
<circle style="stroke: #000000; fill:#00ff00;" />
使用内联样式表
可以在嵌入式样式表中定义形状的样式，然后将所有这些样式自动应用到形状。这是一个例子：
<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> -element内部如何定义circle-element的样式。这与HTML和CSS中的工作方式相同。
内部样式表在Internet Explorer 7和Firefox 3.0.5中均能正常工作。
类属性
我们可以在形状中使用class属性来选择该形状的样式，而不是将样式应用于特定类型的所有形状(例如，所有圆形)。就像在HTML元素中使用class属性一样。
这是绿色和红色圆圈的两种样式的示例。这两种样式中的每一种都使用class属性应用于各自的<circle>元素：
<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>
请注意，样式表中的"圆形"选择器名称是如何以" .myGreen"和" .myRed"作为后缀的。现在，<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中则不能。
在HTML页面中使用样式表。
如果将SVG图像嵌入HTML页面中，则还可以将SVG图像的样式表嵌入HTML页面中。这是一个例子：
<html> <body> <style> </style> <svg> </svg> </body> </html>
要将样式添加到SVG图像内的形状，只需在" style"元素内添加常规CSS属性即可。我们可以使用通常用于HTML的相同CSS选择器来设置SVG元素的样式。这是一个带有circle元素的HTML页面，该元素通过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形状样式的最简单方法。
在形状中局部覆盖样式表
如果已在样式表中设置了样式的样式，则可以通过在要为其设置新样式的形状中本地设置新的样式属性来覆盖此样式。在形状内部局部设置的样式始终优先于内部或者外部样式表中定义的样式。
SVG CSS属性
SVG元素具有以下可以设置的CSS属性。并非所有元素都具有所有这些CSS属性。因此，CSS属性被分为针对不同元素的多个表。
形状CSS属性
path元素和其他shape元素的CSS属性：
| CSS属性 | 描述 |
fill | 设置形状的填充颜色。 |
fill-opacity | |
fill-rule | 设置形状的填充规则。 |
marker | 设置沿此形状的线（边）使用的标记。 |
marker-start | 设置沿此形状的线（边）使用的开始标记。 |
marker-mid | 设置沿此形状的线（边）使用的中间标记。 |
marker-end | |
stroke | 设置用于绘制此形状轮廓的描边（线条）颜色。 |
stroke-dasharray | |
stroke-dashoffset | |
stroke-linecap | |
stroke-miterlimit | 设置用于绘制此形状轮廓的笔划（线）斜接限制。 |
stroke-opacity | |
stroke-width | 设置用于绘制此形状轮廓的描边（线）宽度。 |
text-rendering | 设置用于绘制此形状轮廓的文本渲染。 |
文字CSS属性
text元素的CSS属性：
| CSS属性 | 描述 |
alignment-baseline | |
baseline-shift | 设置用于渲染文本的基线偏移。 |
dominant-baseline | 设置主要基线。 |
glyph-orientation-horizontal | 设置水平字形方向。 |
glyph-orientation-vertical | 设置垂直字形方向。 |
kerning |
渐变CSS属性
SVG渐变的CSS属性：
| CSS属性 | 描述 |
stop-color | 设置用于渐变中的stop元素的终止色。 |
stop-opacity | 设置渐变中使用的stop元素中使用的停止不透明度。 |
