27.SVG和CSS-级联样式表

可以使用CSS为你的SVG图形添加样式。通过添加样式可以改变图形的样子。可以修改图形的描边颜色和宽度、填充色、不透明度和许多其它属性。

有六种方法可以为SVG图片中的图形添加样式。本章将会介绍它们。在本章结尾为你列出了在SVG中可以使用的CSS属性列表。

本章假设你已经熟悉CSS。如果你不了解，可以查看我写的CSS教程，它解释了HTML中使用的CSS。SVG元素上的CSS属性与HTML元素上的CSS属性有所不同，但总体原则保持不变。

使用属性的CSS样式

可以通过具体的样式属性（如stroke和fill）为SVG图形添加样式。示例如下：

<circle stroke="#000000" fill="#00ff00" />

有一系列样式属性可供使用。但是，推荐你使用内联样式表或者外联样式表，所以我不会在这里深入太多关于样式属性的细节。

使用`style`属性和CSS属性

这种方法不会使用任何特定的样式属性，它只会使用style属性，并在其内指定CSS属性。如果你需要直接在图形中嵌套样式，并且你学习了CSS属性的名称，那么这种方法优于特定的属性。内联样式表和外联样式表的CSS属性相同，所以更容易复制粘贴。

下面的圆和上面的一样，但是其在style属性中设置了描边和填充：

<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>`元素中。这和HTML中的CSS工作方式相同。

内联样式表在IE7和Firefox3.0.5中均可正常工作。

### class属性

你可以使用图形的`class`属性选择样式，而不是将样式应用到某中类型（如所有圆形）的全部图形上。就像HTML元素上的`class`属性一样。

下面的例子包含两种样式的圆——绿色和红色。这两种样式通过`class`属性应用到对应的`<circle>`元素上。

```xml
<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页面中外联样式文件。此外，你需要在你的SVG文件中的<svg>元素前添加如下声明：

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>

这个处理指令告诉SVG查看器，找到“svg-stylesheet.css”文件，并使用其中的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样式表似乎在IE7中正常工作，而在Firefox3.0.5中无作用。

在HTML页面使用样式表

如果将SVG图片嵌套在HTML页面中，你也可以为其将样式表嵌套在HTML页面。示例如下：

<html>
<body>

<style>
</style>

<svg>
</svg>

</body>
</html>

为了给SVG图片中的图形添加样式，在style元素内添加常规CSS属性即可。你可以使用HTML中的CSS选择器为SVG元素添加样式。下面是一个通过HTML页面中的CSS样式表为页面中的circle元素添加样式的例子：

<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属性

text元素的CSS属性：

渐变CSS属性

SVG渐变CSS属性：

上一页26.SVG use元素下一页28.SVG轮廓

最后更新于4年前