stroke-width

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-width là một thuộc tính trình bày xác định độ rộng của stroke được áp dụng cho hình dạng. Nó áp dụng cho bất kỳ hình SVG hoặc phần tử nội dung văn bản nào, nhưng với vai trò là một thuộc tính kế thừa, nó có thể được áp dụng cho các phần tử như <g> và vẫn tạo hiệu ứng mong muốn lên stroke của các phần tử con.

Note: Là một thuộc tính trình bày, stroke-width cũng có một thuộc tính CSS tương ứng: stroke-width. 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ụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Độ rộng stroke mặc định: 1 -->
  <circle cx="5" cy="5" r="3" stroke="green" />

  <!-- Độ rộng stroke dưới dạng số -->
  <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />

  <!-- Độ rộng stroke dưới dạng phần trăm -->
  <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
</svg>