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>
自己動手試一試 »
