stroke

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Some parts of this feature may have varying levels of support.

Thuộc tính stroke là một thuộc tính trình bày xác định màu (hoặc bất kỳ SVG paint server nào như gradient hay pattern) được dùng để tô viền của hình dạng.

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

Trong ví dụ này, chúng ta định nghĩa ba hình dạng bằng các phần tử <path>, mỗi hình có một màu stroke và fill khác nhau. Chúng ta cũng định nghĩa một phần tử <circle> làm marker thông qua phần tử <marker>. Mỗi hình có marker được áp dụng thông qua thuộc tính CSS marker.

Phần tử <circle> có stroke="context-stroke" và fill="context-fill" được đặt cho nó. Vì nó đang được đặt làm marker trong ngữ cảnh của các hình, các thuộc tính này khiến nó kế thừa fill và stroke được đặt trên phần tử <path> trong mỗi trường hợp.

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <style>
    path {
      stroke-width: 2px;
      marker: url("#circle");
    }
  </style>
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"
        stroke="red" fill="orange" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"
        stroke="green" fill="lightgreen" />
  <path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"
        stroke="blue" fill="lightblue" />
  <marker id="circle" markerWidth="12" markerHeight="12"
          refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2"
            stroke="context-stroke" fill="context-fill"  />
  </marker>
</svg>

Kết quả đầu ra như sau:

Note: Các phần tử cũng có thể dùng context-stroke và context-fill để kế thừa giá trị stroke và fill khi chúng được tham chiếu bởi các phần tử <use>.