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>