SVG——新一代Web设计及互动媒体的革新

蓝骑士SVG教程:SVG基础 - 第五课 SVG样式表(CSS)

文章索引
蓝骑士SVG教程:SVG基础
第一课 开始
第二课 SVG图像容器
第三课 SVG Path路径与图形
第四课 SVG文本(text)
第五课 SVG样式表(CSS)
第六课 SVG填充(fill)
第七课 SVG笔划(stroke)
第八课 SVG梯度(Gradients)
第九课 SVG滤镜
第十课 SVG和当前的标准网络图像(JPEG,GIF,PNG)
第十一课 SVG支持ICC色彩模式
第十二课 SVG打印
所有页面
  样式表(CSS)是网页制作中一种非常有效的定义文字和图片显示样式的方法。SVG支持CSS2的规范,可以自由的使用内部样式表,植入式样式表,外部样式表。 样式表的定义包括:样式选择名和样式描述。

  下面的例子中,"st0"是样式选择名,"fill:red"是样式描述。
.st0 {fill:red;}

  通过样式选择名,创作者可以层叠的调用一些不同样式来获得不同效果,而这些样式只需要定义一次以后,就可以被反复的调用。



  在上面的图像中,并没有样式表,每一个矩形通过如下定义:

<g id="round_corners">
<g style="stroke:#990000;stroke-width:2;>
<path d="M37.693,104.875c0,..."/>

  如果使用一个植入式样式表,上面的style="..."将被一个预定义的样式(命名为.st2)所取代。现在,如果你希望改变图形的属性(在这个例子中将是所有的30个图形),只需要在.st2中修改样式就可以了。效率是不是一下提高了?

.st2{fill:none;stroke:#990000;stroke-width:2;} 修改为 .st2{fill:#000FF;fill-opacity:.5;stroke:none;}



 

将要更新