编辑这个页面须要登录或更高权限！

SVG CSS样式

我们可以使用CSS设置SVG形状的样式。样式是指改变形状的外观。这可以是笔触颜色和宽度，填充颜色，不透明度和形状的许多其他属性。

有6种样式可以设置SVG图像中的形状。每个都将在本文中介绍。在本文的结尾，您将找到可以与SVG一起使用的CSS属性的列表。

使用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>
测试看看‹/›

虽然有一系列可用的样式属性。但是，建议您使用内联样式表或外部样式表，因此在这里我不会过多介绍样式属性。

使用style属性和CSS属性

此方法不使用任何特定于样式的属性。相反，它仅使用 style属性并在其中指定CSS属性。如果您需要直接在样式中嵌入样式，则此方法优于特定属性，因为您可以学习CSS属性的名称。内部或外部样式表中的CSS属性都是相同的，因此复制粘贴和学习此类内容更加容易。

这是一个通过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>元素内部如何定义circle元素的样式。这与HTML和CSS中的工作方式相同。

内部样式表在Internet Explorer 7和Firefox 3.0.5中均能正常工作。

效果如下:

class类属性

可以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。现在，<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元素的样式。这是一个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形状样式的最简单方法。

在形状中局部覆盖样式表

如果已在样式表中设置了样式的样式，则可以通过在要为其设置新样式的形状内本地设置新的样式属性来覆盖此样式。在形状内部局部设置的样式始终优先于内部或外部样式表中定义的样式。

SVG CSS属性

SVG元素具有以下可以设置的CSS属性。并非所有元素都具有所有这些CSS属性。因此，CSS属性被分为针对不同元素的多个表。

形状CSS属性

path元素和其他形状元素的 CSS属性：

CSS属性描述
fill设置形状的填充颜色。
fill-opacity设置形状的填充不透明度。
fill-rule设置形状的填充规则。
marker设置沿此形状的线（边）使用的标记。
marker-start设置沿此形状的线（边）使用的开始标记。
marker-mid设置沿此形状的线（边）使用的中间标记。
marker-end设置沿此形状的线（边）使用的结束标记。
stroke设置用于绘制此形状轮廓的笔触（线条）颜色。
stroke-dasharray设置用于绘制此形状轮廓的笔划（虚线）。
stroke-dashoffset设置用于绘制此形状轮廓的笔划（直线）破折号偏移量。
stroke-linecap设置用于绘制此形状轮廓的笔划（线）线帽。有效值为round，butt和square。
stroke-miterlimit设置用于绘制此形状轮廓的笔划（直线）斜接限制。
stroke-opacity设置用于绘制此形状轮廓的笔触（直线）不透明度。
stroke-width设置用于绘制此形状轮廓的笔触（线条）宽度。
text-rendering设置用于绘制此形状轮廓的文本渲染。

文字CSS属性

text元素的 CSS属性：

CSS属性描述
alignment-baseline设置文本与其对齐方式x和y坐标。
baseline-shift设置用于呈现文本的基线偏移。
dominant-baseline设置主要基线。
glyph-orientation-horizontal设置水平字形方向。
glyph-orientation-vertical设置垂直字形方向。
kerning设置渲染文本的字距（字距是字母间距）。

渐变CSS属性

SVG渐变的CSS属性：

CSS属性描述
stop-color设置在渐变中使用的stop元素中使用的终止色。
stop-opacity设置stop在渐变中使用的元素中使用的停止不透明度。
SVG stroke属性SVG <use> 元素