SVG Stroke属性

一、stroke属性介绍

SVG提供了一个范围广泛stroke属性，用于描述轮廓，其中包括

• stroke 指定颜色
• stroke-width 指定宽度
• stroke-linecap 指定端点样式
• stroke-dasharray 指定间隔线数组

1.所有的stroke属性，可应用于任何类的线条、文字和元素就像一个圆的轮廓

2.所有的stroke属性，可以单独指定，可以都放在style属性中。

二、stroke属性定义一条线、文本或元素的轮廓颜色，stroke-width属性定义一条线、文本或元素轮廓厚度

<svg style="border:1px solid red;" width="400px" height="300px">
    <g fill='none'>
        <path stroke="red" stroke-width="5" d="M20 20,300 20 " />
        <path stroke="blue" stroke-width="5" d="M20 120,300 120" />
        <path stroke="black" stroke-width="5" d="M20 220,300 220"/>
    </g>
</svg>

三、stroke-linecap属性定义不同类型的开放路径的终结

<svg style="border:1px solid red;" width="400px" height="300px">
    <g fill='none' stroke-width="10">
        <path stroke="red"  stroke-linecap="round" d="M20 20,300 20 " />
        <path stroke="blue"  stroke-linecap="butt" d="M20 120,300 120" />
        <path stroke="black" stroke-linecap="square"  d="M20 220,300 220"/>
    </g>
</svg>

四、stroke-dasharray属性用于创建虚线

<svg style="border:1px solid red;" width="500px" height="100px">
    <g fill='none' stroke='black' stroke-width='4'>
        <path stroke-dasharray='5,5' d='M5 20,400,20' />
        <path stroke-dasharray='10,10' d='M5 40,400,40' />
        <path stroke-dasharray='20,10,5,5,5,10' d='M5 60,400,60' />
    </g>
</svg>

示例1，使用stroke描述文字轮廓

<svg style="border:1px solid red;" width="400px" height="400px">
    <text x='100' y='100' fill='red' style='font-size:50px;font-weight:bold;font-family:楷体'
    stroke='blue' stroke-width='2'
    >中文内容</text>
</svg>

示例2，在style中使用stroke属性

<svg style="border:1px solid red;" width="200px" height="400px">
    <rect style="stroke:blue;stroke-width:5px;stroke-dasharray:2 10 2" 
    width='100' height='100' x='50' y='50'></rect>
    
    <rect style="stroke:blue;stroke-width:3px;" 
    stroke-dasharray='2,10,2' fill='green'
        width='100' height='100' x='50' y='200'></rect>
</svg>