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

蓝骑士SVG教程:SVG基础 - 第六课 SVG填充(fill)

文章索引
蓝骑士SVG教程:SVG基础
第一课 开始
第二课 SVG图像容器
第三课 SVG Path路径与图形
第四课 SVG文本(text)
第五课 SVG样式表(CSS)
第六课 SVG填充(fill)
第七课 SVG笔划(stroke)
第八课 SVG梯度(Gradients)
第九课 SVG滤镜
第十课 SVG和当前的标准网络图像(JPEG,GIF,PNG)
第十一课 SVG支持ICC色彩模式
第十二课 SVG打印
所有页面
  现在我们已经了解了SVG文件是通过组织不同的物件(元素)来形成图像,下面我们进一步的讨论定义中的一些属性和值的设定.

  "填充"(fill)

  请看下面的语句:

<path style="fill:white">

  fill后面可使用的值: none, current-color, (color)

  填充属性决定了物件是否利用色块进行填充,并且色块用的是什么样的颜色。"none"是无色,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜色值,(color)是自定义的色彩。

  "填充规则"(fillrule)

  请看下面的语句:

<path style="fillrule:nonzero">

  fillrule后可使用的值: evenodd, nonzero, inherit

  填充规则属性定义对所有路径区域填充或者只是对交叉部分填充,下面的例子分别是"evenodd"和"nonzero"的应用。



  "inherit" 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。

  "填充透明度"(fill-opacity)

  请看下面的语句:

<path style="fill-opacity:0.25">

  fill-opacity后可使用的值: 0到1的任何数

  填充透明度决定了一个物件的填充是实色填充(透明度数值为1)还是透明的填充(透明度数值为0).关于物件的透明度属性其他还有如:"笔划透明度"(stroke-opacity),对应于笔划的透明程度;"透明"(opacity),对应于物件整体的透明程度。



***附js3

 

将要更新