/
index.md
133 lines (112 loc) · 2.24 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
---
title: stroke-dashoffset
slug: Web/SVG/Attribute/stroke-dashoffset
---
{{SVGRef}}
« [SVG 屬性引用首頁](/zh-TW/SVG/Attribute)
`stroke-dashoffset` 屬性指定一個數值至虛線的開頭。
如果使用 [\<percentage>](/zh-TW/SVG/Content_type#Percentage) ,值則會代表當前 viewport 的百分比。
值允許為負值。
## Usage context
<table>
<tbody>
<tr>
<th scope="row">類別</th>
<td>Presentation attribute</td>
</tr>
<tr>
<th scope="row">可用值</th>
<td>
<a href="/en/SVG/Content_type#Percentage"><percentage></a> |
<a href="/en/SVG/Content_type#Length"><length></a> | inherit
</td>
</tr>
<tr>
<th scope="row">初始值</th>
<td>0</td>
</tr>
<tr>
<th scope="row">可動畫化</th>
<td>是</td>
</tr>
<tr>
<th scope="row">規範文件</th>
<td>
<a
href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty"
>SVG 1.1 (2nd Edition)</a
>
</td>
</tr>
</tbody>
</table>
## 範例
### HTML 內容
```html
<svg
width="200"
height="200"
viewBox="0 0 200 200"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line
stroke-dashoffset="0"
stroke-dasharray="20"
x1="0"
y1="10"
x2="200"
y2="10" />
<line
stroke-dashoffset="10"
stroke-dasharray="20"
x1="0"
y1="20"
x2="200"
y2="20" />
<line
stroke-dashoffset="20"
stroke-dasharray="20"
x1="0"
y1="30"
x2="200"
y2="30" />
<line
stroke-dashoffset="50%"
stroke-dasharray="20"
x1="0"
y1="40"
x2="200"
y2="40" />
<line
stroke-dashoffset="25%"
stroke-dasharray="20"
x1="0"
y1="50"
x2="200"
y2="50" />
<line
stroke-dashoffset="0%"
stroke-dasharray="20"
x1="0"
y1="60"
x2="200"
y2="60" />
</svg>
```
### CSS 內容
```css
line {
stroke: #51bba7;
stroke-width: 2;
}
```
### 結果
{{ EmbedLiveSample('範例') }}
## 適用元素
以下元素可以使用 `stroke-dashoffset` 屬性
- [Shape elements](/zh-TW/SVG/Element#Shape) »
- [Text content elements](/zh-TW/SVG/Element#TextContent) »
## 規範
{{Specifications}}
## 瀏覽器相容性
{{Compat}}