SVG基础----SVG图形描边

SVG的描边属性stroke用于定义图形的描边样式

1、描边示例

可以在SVG图形中使用style属性来为图形设置描边和填充等样式

<svg>
    <circle cx="60" cy="100" r="50" style="stroke:#1D7DB1;fill: none;"></circle>
</svg>

2、描边宽度

可以使用stroke-width CSS属性来为图形的描边设置宽度

<svg>
    <circle cx="30" cy="100" r="25" style="stroke:#1D7DB1;stroke-width:2px;fill: none;"></circle>
    <circle cx="90" cy="100" r="25" style="stroke:#1D7DB1;stroke-width:4px;fill: none;"></circle>
    <circle cx="150" cy="100" r="25" style="stroke:#1D7DB1;stroke-width:6px;fill: none;"></circle>
    <circle cx="210" cy="100" r="25" style="stroke:#1D7DB1;stroke-width:8px;fill: none;"></circle>
</svg>

3、描边的线头

stroke-linecap CSS属性用于定义图形描边中线条头部的渲染样式。有3种可能的stroke-linecap样式：

• butt
• square
• round

butt属性指定线条的头部从线条的结束处被精确的切断。square属性和butt类似，但是它会在线条的两端留下一些空间。round属性指定线条使用圆形的线头。

<svg>
    <line x1="30" y1="30" x2="200" y2="30" style="stroke: #1D7DB1;stroke-linecap: butt;stroke-width:10;fill:none"></line>
    <line x1="30" y1="60" x2="200" y2="60" style="stroke: #1D7DB1;stroke-linecap:square;stroke-width:10;fill:none"></line>
    <line x1="30" y1="90" x2="200" y2="90" style="stroke: #1D7DB1;stroke-linecap: round;stroke-width:10;fill:none"></line>
</svg>

4、描边的连线

<svg>
    <path d="M20,100 l20,-50 l20,50" style="stroke: #000000;fill: none;stroke-width:16;stroke-linejoin: miter;" />
    <text x="22" y="20">miter</text>
    <path d="M80,100 l20,-50 l20,50" style="stroke: #000000;fill: none;stroke-width: 16;stroke-linejoin: round;"></path>
    <text x="82" y="20">round</text>
    <path d="M140,100 l20,-50 l20,50" style="stroke: #000000;fill: none;stroke-width: 16;stroke-linejoin: bevel;"></path>
    <text x="142" y="20">bevel</text>
</svg>

5、stroke-dasharray

SVG stroke-dasharray CSS属性用于绘制图形的虚线描边。之所以会被称之为“dash array”，是因为我们要为它提供一组数值。这组数值定义虚线的长度和间距。因此，这组数值的个数应该是偶数个

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

 

这个例子定义了一条每个虚线段长度为10像素的虚线，两段虚线之间的间距为5像素

<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像素的间距，然后按照这个模式一直延伸下去

6、stroke-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;
      "  />  

7、描边透明度

stroke-opacity CSS属性用于定义图形描边的透明度