1. Web
  2. CSS
  3. stroke-dashoffset

stroke-dashoffset

Baseline 已廣泛支援

該特性已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 4 月以來，它已在各大瀏覽器上可用。

stroke-dashoffset CSS 屬性定義了 SVG 元素關聯的虛線陣列渲染起始點的偏移量。如果存在，它將覆蓋元素的 stroke-dashoffset 屬性。

此屬性適用於任何 SVG 形狀或文字內容元素（參見 stroke-dashoffset 獲取完整列表），但作為繼承屬性，它也可以應用於 <g> 等元素，並仍然對後代元素的描邊產生預期效果。

語法

css
/* Keyword */
stroke-dashoffset: none;

/* Length and percentage values */
stroke-dashoffset: 2;
stroke-dashoffset: 2px;
stroke-dashoffset: 2%;

/* Global values */
stroke-dashoffset: inherit;
stroke-dashoffset: initial;
stroke-dashoffset: revert;
stroke-dashoffset: revert-layer;
stroke-dashoffset: unset;

值

<number>

SVG 單位的數量，其大小由當前單位空間定義。如果給定值不是 0，則會將起始點從虛線陣列的開頭移動到其中的另一個點。因此，正值將使虛線-間隙模式顯得向“後”移動，而負值將使模式顯得向“前”移動。

<length>

畫素單位的處理方式與 SVG 單位相同（參見上文的 <number>），而基於字型的長度（如 em）是根據元素的文字大小的 SVG 值計算的；其他長度單位的效果可能取決於瀏覽器。任何值的位移效果與 <number> 值相同（參見上文）。

<percentage>

百分比指的是當前 SVG 視口歸一化對角線，計算方法為<width>2+<height>22，而不是描邊路徑的總長度。負值無效。

正式定義

初始值0
應用於svg 中的 <circle>、<ellipse>、<line>、<path>、<polygon>、<polyline> 和 <rect> 元素
繼承性是
百分比指的是當前 SVG 視口應用的 viewBox 的歸一化對角線測量值，如果未指定 viewBox，則指視口本身的測量值。
計算值一個絕對的 <length> 或 <percentage>，數字首先轉換為絕對長度
動畫型別按計算值型別

正式語法

stroke-dashoffset = 
  <length-percentage>  |
  <number>             

<length-percentage> = 
  <length>      |
  <percentage>

示例

虛線偏移

為了演示虛線如何偏移，我們首先設定了五個相同的路徑，所有這些路徑都透過 SVG 屬性 stroke-dasharray 給定一個由 20 個單位的虛線和 3 個單位的間隙組成的虛線陣列。（這也可以透過 CSS 屬性 stroke-dasharray 完成。）然後，這些路徑透過 CSS 獲得單獨的虛線偏移。

html
<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#eeeeee" />
  <g stroke="dodgerblue" stroke-width="2" stroke-dasharray="20,3">
    <path d="M 10,10 h 80" />
    <path d="M 10,15 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,25 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>
css
path:nth-of-type(1) {
  stroke-dashoffset: 0;
}
path:nth-of-type(2) {
  stroke-dashoffset: -5;
}
path:nth-of-type(3) {
  stroke-dashoffset: 5;
}
path:nth-of-type(4) {
  stroke-dashoffset: 5px;
}
path:nth-of-type(5) {
  stroke-dashoffset: 5%;
}

按順序

  1. 五個路徑中的第一個被賦予零偏移，這是預設行為。
  2. 第二個路徑被賦予 -5 的偏移量，這將陣列的起始點移動到零點之前的五個單位。視覺效果是虛線圖案向前移動了五個單位；因此，我們在路徑的開頭看到了虛線的最後兩個單位，然後是一個三單位的間隙。
  3. 第三個路徑的偏移量為 5，這意味著虛線的起始點在虛線圖案中偏移了五個單位。視覺效果是虛線圖案向後推了五個單位；因此，我們在路徑的開頭看到了虛線的最後十五個單位，然後是一個三單位的間隙。
  4. 第四個路徑的偏移量為 5px，這與 5 值具有相同的效果（參見上文）。
  5. 第五個也是最後一個路徑的偏移量為 5%，這與前兩個示例非常相似，但又不完全相同。百分比是根據 SVG 視口的對角線測量值計算的，因此可能會根據視口的大小和寬高比而變化。

規範

規範
CSS 填充與描邊模組 Level 3
# stroke-dashoffset

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.