選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 屬性來設定多邊形、矩形、圓形和文字的輪廓顏色。

I love SVG! Sorry, your browser does not support inline SVG.

這是 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 屬性來定義三條線的顏色

Sorry, your browser does not support inline SVG.

這是 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 屬性來設定多邊形、矩形、圓形和文字的輪廓寬度。

I love SVG! Sorry, your browser does not support inline SVG.

這是 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 屬性來設定三條線的寬度

Sorry, your browser does not support inline SVG.

這是 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 屬性來設定多邊形、矩形、圓形和文字的輪廓透明度。

I love SVG! Sorry, your browser does not support inline SVG.

這是 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 屬性來設定三條線的透明度。

Sorry, your browser does not support inline SVG.

這是 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 屬性來為三條線設定不同的末端形狀。

Sorry, your browser does not support inline SVG.

這是 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 屬性建立不同的虛線。

Sorry, your browser does not support inline SVG.

這是 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 屬性為多邊形、矩形和圓形建立不同的虛線輪廓。

Sorry, your browser does not support inline SVG.

這是 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 屬性來建立不同的角形狀。

Sorry, your browser does not support inline SVG. Sorry, your browser does not support inline SVG. Sorry, your browser does not support inline SVG.

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

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援