stroke-opacity
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-opacity là một thuộc tính trình bày xác định độ trong suốt của paint server (màu, gradient, pattern, v.v.) được áp dụng cho stroke của một hình dạng.
Note:
Là một thuộc tính trình bày, stroke-opacity cũng có một thuộc tính CSS tương ứng: stroke-opacity. 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 40 10" xmlns="http://www.w3.org/2000/svg">
<!-- Độ mờ stroke mặc định: 1 -->
<circle cx="5" cy="5" r="4" stroke="green" />
<!-- Độ mờ stroke dưới dạng số -->
<circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" />
<!-- Độ mờ stroke dưới dạng phần trăm -->
<circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" />
<!-- Độ mờ stroke dưới dạng thuộc tính CSS -->
<circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" />
</svg>
Ghi chú sử dụng
| Giá trị |
[0-1] |
<percentage>
|
|---|---|
| Giá trị mặc định | 1 |
| Có thể hoạt ảnh | Yes |
Điều quan trọng cần biết là stroke che phủ một phần fill của hình dạng, vì vậy một stroke có độ mờ khác 1 sẽ làm phần fill bên dưới hiện ra một phần. Để tránh hiệu ứng này, có thể áp dụng độ mờ toàn cục bằng thuộc tính opacity hoặc đặt stroke phía sau fill bằng thuộc tính paint-order.
Đặc tả
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # StrokeOpacity |
Tương thích trình duyệt
Xem thêm
- Thuộc tính CSS
stroke-opacity