SVG 描邊屬性
SVG 描邊屬性
stroke
屬性設定繪製在元素周圍的線條顏色。
我們將介紹六個 stroke
屬性
-
stroke
- 設定元素周圍線條的顏色 -
stroke-width
- 設定元素周圍線條的寬度 -
stroke-opacity
- 設定元素周圍線條的透明度 -
stroke-linecap
- 設定線條或開放路徑末端的形狀 -
stroke-dasharray
- 設定線條顯示為虛線 -
stroke-linejoin
- 設定兩條線相交處的角的形狀
SVG 描邊屬性
stroke
屬性定義元素的輪廓顏色。
stroke
屬性可用於以下 SVG 元素:<circle>
、<ellipse>
、<line>
、<path>
、<polygon>
、<polyline>
、<rect>
、<text>
、<textPath>
、<tref>
和 <tspan>
。
stroke
屬性的值可以是顏色名稱、rgb 值或十六進位制值。
在這裡,我們使用 stroke
屬性來設定多邊形、矩形、圓形和文字的輪廓顏色。
這是 SVG 程式碼
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" stroke="red" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" />
<text x="420" y="100" fill="red" stroke="blue">I love SVG!</text>
</svg>
自己動手試一試 »
在這裡,我們使用 stroke
屬性來定義三條線的顏色
這是 SVG 程式碼
示例
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="green" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
自己動手試一試 »
SVG stroke-width 屬性
stroke-width
屬性定義描邊的寬度。
stroke-width
屬性可用於以下 SVG 元素:<circle>
、<ellipse>
、<line>
、<path>
、<polygon>
、<polyline>
、<rect>
、<text>
、<textPath>
、<tref>
和 <tspan>
。
在這裡,我們使用 stroke-width
屬性來設定多邊形、矩形、圓形和文字的輪廓寬度。
這是 SVG 程式碼
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" />
<text x="420" y="100" fill="red" stroke="blue" stroke-width="4">I love SVG!</text>
</svg>
自己動手試一試 »
在這裡,我們使用 stroke-width
屬性來設定三條線的寬度
這是 SVG 程式碼
示例
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
自己動手試一試 »
SVG stroke-opacity 屬性
stroke-opacity
屬性定義描邊的透明度。
stroke-opacity
屬性可用於以下 SVG 元素:<circle>
、<ellipse>
、<line>
、<path>
、<polygon>
、<polyline>
、<rect>
、<text>
、<textPath>
、<tref>
和 <tspan>
。
stroke-opacity
屬性的值範圍是從 0 到 1(或 0% 到 100%)。
在這裡,我們使用 stroke-opacity
屬性來設定多邊形、矩形、圓形和文字的輪廓透明度。
這是 SVG 程式碼
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-opacity="0.4" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-opacity="0.4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-opacity="0.4" />
<text x="420" y="100" fill="red" stroke="blue" stroke-width="4" stroke-opacity="0.4">I love SVG!</text>
</svg>
自己動手試一試 »
在這裡,我們使用 stroke-opacity
屬性來設定三條線的透明度。
這是 SVG 程式碼
示例
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" stroke-opacity="0.4" d="M5 20 l215 0" />
<path stroke-width="4" stroke-opacity="0.4" d="M5 40 l215 0" />
<path stroke-width="6" stroke-opacity="0.4" d="M5 60 l215 0" />
</g>
</svg>
自己動手試一試 »
SVG stroke-linecap 屬性
stroke-linecap
屬性定義線條或開放路徑的末端型別。
stroke-linecap
屬性可用於以下 SVG 元素:<path>
、<polyline>
、<line>
、<text>
、<textPath>
、<tref>
和 <tspan>
。
stroke-linecap
屬性的值可以是 "butt"(平頭)、"round"(圓頭)或 "square"(方頭)。
在這裡,我們使用 stroke-linecap
屬性來為三條線設定不同的末端形狀。
這是 SVG 程式碼
示例
<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red" stroke-width="16">
<path stroke-linecap="butt" d="M10 20 l215 0" />
<path stroke-linecap="round" d="M10 50 l215 0" />
<path stroke-linecap="square" d="M10 80 l215 0" />
</g>
</svg>
自己動手試一試 »
SVG stroke-dasharray 屬性
stroke-dasharray
屬性用於建立虛線。
stroke-dasharray
屬性可用於以下 SVG 元素:<circle>
、<ellipse>
、<line>
、<path>
、<polygon>
、<polyline>
、<rect>
、<text>
、<textPath>
、<tref>
和 <tspan>
。
stroke-dasharray
屬性的值可以是 "none",或者是一系列由逗號或空格分隔的長度/百分比,用於定義破折號和間隙的長度。
在這裡,我們使用 stroke-dasharray
屬性建立不同的虛線。
這是 SVG 程式碼
示例
<svg height="100" width="400" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red" stroke-width="6">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="35,10" d="M5 60 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 80 l215 0" />
</g>
</svg>
自己動手試一試 »
在這裡,我們使用 stroke-dasharray
屬性為多邊形、矩形和圓形建立不同的虛線輪廓。
這是 SVG 程式碼
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
<rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-dasharray="10,5" />
</svg>
自己動手試一試 »
SVG stroke-linejoin 屬性
stroke-linejoin
屬性定義兩條線相交處的角的形狀。
stroke-linejoin
屬性可用於以下 SVG 元素:<path>
、<polygon>
、<polyline>
、<rect>
、<text>
、<textPath>
、<tref>
和 <tspan>
。
stroke-linejoin
屬性的值可以是 "arcs"(圓弧)、"bevel"(斜角)、"miter"(斜接)、"miter-clip"(斜接裁剪)或 "round"(圓角)。
在這裡,我們使用 stroke-linejoin
屬性來建立不同的角形狀。
這是 SVG 程式碼
示例
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="round" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="round" />
</svg>
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="miter" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="miter" />
</svg>
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
</svg>
自己動手試一試 »