Skip to content

Latest commit

 

History

History
154 lines (109 loc) · 5.51 KB

29.SVG填充.md

File metadata and controls

154 lines (109 loc) · 5.51 KB

SVG填充


SVG图形的fill定义了其轮廓内部的颜色。换句话说就是SVG形状的表面。fill是你可以为任何SVG图形设置的基础CSS属性之一。

填充示例

SVG形状的fill是在形状轮廓内的填充。下面是一个SVG填充的示例:

<circle cx="50" cy="50" r="25"
        style="stroke: none; fill: #0000ff;" />

这个例子定义了一个填充色为蓝色(#0000ff)无描边的圆。最终图片如下:

<circle cx="50" cy="50" r="25" style="stroke: none; fill: #0000ff;"></circle>

填充和描边示例

你可以在SVG图形上组合使用描边和填充色。示例如下:

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: #3333ff;" />

这个例子定义了一个描边为深蓝色(#000066)填充为浅蓝色(#3333ff)的圆,最终图片如下:

<circle cx="50" cy="50" r="25" style="stroke: #000066; fill: #3333ff;"></circle>

fill-opacity

SVG CSS属性fill-opacity用来设置图形填充色的不透明度。其值为0和1之间的小数。值越接近0,填充越透明。值越接近1,填充越不透明。fill-opacity默认为1,表示填充色完全不透明。

下面例子中包含两个带有不同fill-opacity值的圆:

<text x="22" y="40">Text Behind Shape</text>

<circle cx="50" cy="50" r="25"
        style="stroke: none; fill: #0000ff;
               fill-opacity: 0.3;  " />
<circle cx="120" cy="50" r="25"
        style="stroke: none; fill: #0000ff;
               fill-opacity: 0.7;  " />

最终图片如下:

<text x="22" y="40">Text Behind Shape</text>

<circle cx="50" cy="50" r="25" style="stroke: none; fill: #0000ff;
               fill-opacity: 0.3;  "></circle>
<circle cx="120" cy="50" r="25" style="stroke: none; fill: #0000ff;
               fill-opacity: 0.7;  "></circle>

注意右边的圆后面的文本比左边的可见性小。这是因为右边圆的fill-opacity值比左边的大。

fill-rule

fill-rule确定了如何填充复杂图形。fill-rule可以采用两种不同的值,如下:

nonzero
evenodd

通常,这两个值用于确定形状内部和外部的规则。只有内部是填充。对于一个圆,这很简单,但对于更复杂的形状,这并不是那么容易。请看这个<path>例子:

<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
         style="stroke: #000000;
         fill: #6666ff;
         fill-rule: nonzero;
      " />

<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
         style="stroke: #000000;
         fill: #6666ff;
         fill-rule: nonzero;" />

这两个路径例子都由8条线绘制的菱形组成,在较大菱形内部还有一个小的菱形。左边的路径中,内部菱形从左向右(顺时针)。右边的路径中,内部菱形从右向左(逆时针)。下面是使用fill-rule: nonzero的最终图片:

<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
     M150,40 l-20,20 l20,20 l20,-20 l-20,-20" style="stroke: #000000;
     fill: #6666ff;
     fill-rule: nonzero;"></path>

正如你所见,nonzero规则依据内部菱形的绘制方向确定内部菱形在形状的内部还是外部。用于确定点是在形状内部还是外部的nonzero规则:

从一个点往任何方向上绘制一条直线(射线)。形状中的路径每次穿过此射线时,如果路径从左到右穿过射线,则计数器加1,如果路径从右到左穿过射线,则计数器减1。如果穿过射线的所有路径都计数完,并且计数器为0,则该点被认为在路径外。如果计数器非0,则该点被认为在路径内。

下面是两个使用同样的fill-rule: evenodd的路径例子:

<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
      style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;" />

<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
      style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;" />

最终图片如下:

<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
         M50,40 l20,20 l-20,20 l-20,-20 l20,-20" style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;"></path>

<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
         M150,40 l-20,20 l20,20 l20,-20 l-20,-20" style="stroke: #000000;
      fill: #6666ff;
      fill-rule: evenodd;"></path>

用于确定点是在形状内部还是外部的evenodd规则:

从一个点往任何方向上绘制一条直线(射线)。每次路径穿过射线,计数器加1。如果总数是偶数,则点在外部。如果总计数为奇数,点在形状内。