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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM