27.SVG和CSS-级联样式表
>
可以使用CSS为你的SVG图形添加样式。通过添加样式可以改变图形的样子。可以修改图形的描边颜色和宽度、填充色、不透明度和许多其它属性。
有六种方法可以为SVG图片中的图形添加样式。本章将会介绍它们。在本章结尾为你列出了在SVG中可以使用的CSS属性列表。
本章假设你已经熟悉CSS。如果你不了解,可以查看我写的CSS教程,它解释了HTML中使用的CSS。SVG元素上的CSS属性与HTML元素上的CSS属性有所不同,但总体原则保持不变。
使用属性的CSS样式
可以通过具体的样式属性(如stroke
和fill
)为SVG图形添加样式。示例如下:
有一系列样式属性可供使用。但是,推荐你使用内联样式表或者外联样式表,所以我不会在这里深入太多关于样式属性的细节。
使用style
属性和CSS属性
style
属性和CSS属性这种方法不会使用任何特定的样式属性,它只会使用style
属性,并在其内指定CSS属性。如果你需要直接在图形中嵌套样式,并且你学习了CSS属性的名称,那么这种方法优于特定的属性。内联样式表和外联样式表的CSS属性相同,所以更容易复制粘贴。
下面的圆和上面的一样,但是其在style
属性中设置了描边和填充:
使用内联样式表
你也可以在内联样式表中为你的图形定义样式,并将这些样式自动应用到你的图形上。示例如下:
可以发现,样式表中的circle
选择器被添加了一个.myGreen
和.myRed
后缀。现在,<circle>
元素可以通过使用class="myGreen"
或class="myRed"
引用绿色或红色圆的样式。
使用外联样式表
当你使用外联样式表时,样式表被放在一个单独的文件中,并将其放到你Web服务中,就像HTML页面中外联样式文件。此外,你需要在你的SVG文件中的<svg>
元素前添加如下声明:
这个处理指令告诉SVG查看器,找到“svg-stylesheet.css”文件,并使用其中的CSS样式表。
下面是一个在SVG文件中使用声明的例子:
注意:外联CSS样式表似乎在IE7中正常工作,而在Firefox3.0.5中无作用。
在HTML页面使用样式表
如果将SVG图片嵌套在HTML页面中,你也可以为其将样式表嵌套在HTML页面。示例如下:
为了给SVG图片中的图形添加样式,在style
元素内添加常规CSS属性即可。你可以使用HTML中的CSS选择器为SVG元素添加样式。下面是一个通过HTML页面中的CSS样式表为页面中的circle
元素添加样式的例子:
如果直接将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 | 设置描边线头样式,有效值为 |
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-opacity | 设置渐变中使用的 |
最后更新于