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
Raw

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。如果总数是偶数，则点在外部。如果总计数为奇数，点在形状内。