一、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>