stroke-linecap
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Thuộc tính stroke-linecap là một thuộc tính trình bày xác định hình dạng sẽ được dùng ở cuối các subpath mở khi chúng được vẽ stroke.
Note:
Là một thuộc tính trình bày, stroke-linecap cũng có một thuộc tính CSS tương ứng: stroke-linecap. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Ví dụ
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
<!-- Hiệu ứng của giá trị (mặc định) "butt" -->
<line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" />
<!-- Hiệu ứng của giá trị "round" -->
<line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" />
<!-- Hiệu ứng của giá trị "square" -->
<line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" />
<!--
các đường màu hồng sau đây làm nổi bật
vị trí của path cho từng stroke
-->
<path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>
Ghi chú sử dụng
| Giá trị | butt | round | square |
|---|---|
| Giá trị mặc định | butt |
| Có thể hoạt ảnh | discrete |
butt
Giá trị butt cho biết stroke của mỗi subpath không kéo dài vượt quá hai điểm cuối của nó. Với một subpath có độ dài bằng không, path sẽ không được hiển thị gì cả.
Ví dụ
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Hiệu ứng của giá trị "butt" -->
<path d="M1,1 h4" stroke="black" stroke-linecap="butt" />
<!-- Hiệu ứng của giá trị "butt" trên một path có độ dài bằng không -->
<path d="M3,3 h0" stroke="black" stroke-linecap="butt" />
<!--
các đường màu hồng sau đây làm nổi bật
vị trí của path cho từng stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
round
Giá trị round cho biết ở cuối mỗi subpath, stroke sẽ được kéo dài thêm bởi một nửa hình tròn có đường kính bằng với độ rộng stroke. Với một subpath có độ dài bằng không, stroke sẽ là một hình tròn đầy đủ có tâm tại điểm của subpath.
Ví dụ
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Hiệu ứng của giá trị "round" -->
<path d="M1,1 h4" stroke="black" stroke-linecap="round" />
<!-- Hiệu ứng của giá trị "round" trên một path có độ dài bằng không -->
<path d="M3,3 h0" stroke="black" stroke-linecap="round" />
<!--
các đường màu hồng sau đây làm nổi bật
vị trí của path cho từng stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
square
Giá trị square cho biết ở cuối mỗi subpath, stroke sẽ được kéo dài thêm bởi một hình chữ nhật có chiều rộng bằng nửa độ rộng stroke và chiều cao bằng độ rộng stroke. Với một subpath có độ dài bằng không, stroke sẽ là một hình vuông có độ rộng bằng độ rộng stroke, đặt tâm tại điểm của subpath.
Ví dụ
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
<!-- Hiệu ứng của giá trị "square" -->
<path d="M1,1 h4" stroke="black" stroke-linecap="square" />
<!-- Hiệu ứng của giá trị "square" trên một path có độ dài bằng không -->
<path d="M3,3 h0" stroke="black" stroke-linecap="square" />
<!--
các đường màu hồng sau đây làm nổi bật
vị trí của path cho từng stroke
-->
<path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
<circle cx="1" cy="1" r="0.05" fill="pink" />
<circle cx="5" cy="1" r="0.05" fill="pink" />
<circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # LineCaps |
Tương thích trình duyệt
Xem thêm
- Thuộc tính CSS
stroke-linecap