28.SVG轮廓

SVG图形的stroke定义了其轮廓。stroke是SVG图形基本的SVG CSS属性之一。

样式属性

CSS属性stroke和fill可以在SVG图形的style属性内指定。示例如下：

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

这个例子定义了一个深蓝色边框和浅蓝色填充的圆。

轮廓示例

SVG图形的stroke是其轮廓。下面是一个SVG轮廓例子：

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

此例定义了一个黑色轮廓无填充的圆。最终图片如下：

轮廓和填充示例

你可以组合SVG图形的轮廓和填充色。下面是一个组合例子：

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

这个例子定义了一个深蓝色（#000066）轮廓和浅蓝色（#3333ff）填充的圆。最终图片如下：

stroke-width

SVG有一个CSS属性——stroke-width，其定义了轮廓的宽度。SVGstroke-width示例如下：

stroke-width: 3px;

这个例子将轮廓宽度设置为3像素。除了像素之外，你也可以使用别的单位。在SVG坐标系单位中能看到所有可用单位。

下面四个例子拥有不同stroke-width：

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 1px;" />

<circle cx="150" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 3px;" />

<circle cx="250" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 6px;" />

<circle cx="350" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 12px;" />

最终图片如下：

stroke-linecap

SVG CSS属性stroke-linecap定义了SVG线段结尾处的渲染方式。它有三个不同的值，如下所示：

butt
square
round

butt值导致线段结尾处截断的线头。square值的线头和butt一样，但是其会超过线段结尾一点。round值结尾是圆弧线头。

下面三个SVGstroke-linecap例子解释了这三个值（顺序为butt，square，round）。

为了更好的展示CSS属性stroke-linecap的效果，这个例子定义了个三条绿色线段。在每条绿线中绘制了一条stroke-width为1的黑色线段。它们和绿线有相同的x1,y1和x2,y2坐标，但是没有为其设置stroke-linecap。这么做，你就能看出stroke-linecap属性值之间的不同。

stroke-linejoin

CSS属性stroke-linejoin定义如何渲染形状中两条线之间的连接。CSS属性stroke-linejoin可以采用下列三个值之一：

miter
round
bevel

下面的例子解释了stroke-linejoin不同值的效果：

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;" />
<text x="22" y="20">miter</text>

<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: round;" />
<text x="122" y="20">round</text>

<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: bevel;" />
<text x="222" y="20">bevel</text>

miterroundbevel

stroke-miterlimit

CSS属性stroke-miterlimit和stroke-linejoin一起使用。如果stroke-linejoin设置为miter，stroke-miterlimit可以用来限制两条线相交的点之间的距离，线连接（角）的延伸。

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 1.0;
             " />
<text x="29" y="20">1.0</text>
<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 2.0;
             " />
<text x="129" y="20">2.0</text>
<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 4.0;
             " />
<text x="229" y="20">4.0</text>

注意，为了让三条路径看起来不同，将它们的stroke-miterlimit设置为不同的值。最终图片如下：

1.02.04.0

连接线的长度也叫斜角长度。斜角长度是从连接线的内角到连接线的顶端之间的长度。下面这张图片中，在连接线的上方用红色线绘制出了连接线的长度：

正如你所想，描边越宽，连接线之间的角度越尖锐，斜角越长。

实际上，stroke-miterlimit设置了斜角长度和描边宽度的比率限制。因此，stroke-miterlimit设置为1.0表示斜角长度最大为1*描边宽度。超过部分就会被截断。1.0是stroke-miterlimit最小的可能值。

下面一些连接线例子使用不同角度，并且stroke-miterlimit都为1.0。

注意，当角度越大，被截断的斜角部分越大。这是因为更尖锐的角度自然地产生更长的斜角。

stroke-dasharray + stroke-dashoffset

CSS属性stroke-dasharray用于使用虚线呈现SVG形状的描边。它被称为dash数组的原因是你需要提供一个数字数组作为其值。值定义破折号和空格的长度。因此，你应该提供偶数个数字。

下面是一个SVGstroke-dasharray例子：

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5"  />

这个例子定义了一个描边，其中虚线部分宽为10像素，虚线之间的间隔为5像素。最终图片如下：

<svg width="500" height="100">

    <line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none;
          stroke-width: 6px;
          stroke-dasharray: 10 5"></line>

</svg>

下面一些例子带有不同的虚线和空格宽度：

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 5"  />

<line x1="20" y1="40" x2="120" y2="40"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 10"  />

第一条线由宽度10的虚线开始，紧跟一个宽度5的空格，然后是一个5像素的虚线，然后又一个5像素的空格，最终重复该模式。

第二条线由宽度10的虚线开始，紧跟一个5像素的空格和一个5像素的虚线，最终是一个10像素的空格。

最终图片如下：

<svg width="500" height="100">

    <line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none;
          stroke-width: 6px;
          stroke-dasharray: 10 5 5 5"></line>

    <line x1="20" y1="40" x2="120" y2="40" style="stroke: #000000; fill:none;
          stroke-width: 6px;
          stroke-dasharray: 10 5 5 10"></line>

</svg>

stroke-dashoffset用于设置虚线模式中的开始点。例如，你可以从模式的一般开始，然后从那开始重复模式。下面是一个SVGstroke-dashoffset例子；

<line x1="20" y1="20" x2="170" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5;
      stroke-dashoffset: 5;
      "  />

此例将stroke-dashoffset设置为5像素，意味着从dash模式的5像素位置开始呈现（然而不是所有浏览器都完全支持）。最终图片如下：

stroke-opacity

CSS属性stroke-opacity用来定义SVG图形描边的不透明度。其为0和1之间的一个小数。值越接近0，描边越透明。值越接近1，描边越不透明。stroke-opacity默认值为1，表示描边完全不透明。

下面例子在文本上展示了三条带有不同stroke-opacity的线：

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

<path d="M20,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.3;
             " />

<path d="M80,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.7;
             " />

<path d="M140,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 1;
             " />

最终图片如下，透过不同的线，文本越来越不可见。

Text Behind Shape

上一页27.SVG和CSS-级联样式表下一页29.SVG填充

最后更新于