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

描述

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元素中的最终不透明度

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

最后更新于