Thuộc tính chạm SVG

Thuộc tính chạm SVG

SVG cung cấp một loạt các thuộc tính bút. Trong chương này, chúng ta sẽ thảo luận về các nội dung sau:

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

Tất cả các thuộc tính chạm có thể được sử dụng cho bất kỳ loại đường, văn bản và viền của yếu tố (như hình tròn).

Thuộc tính stroke của SVG

stroke Thuộc tính định nghĩa màu sắc của đường viền của đường, văn bản hoặc yếu tố:

Đây là mã SVG:

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

Thử ngay

Thuộc tính stroke-width của SVG

stroke-width Thuộc tính định nghĩa độ dày của đường viền của văn bản, văn bản hoặc yếu tố:

Đây là mã SVG:

<svg height="80" width="300">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

Thử ngay

Thuộc tính stroke-linecap của SVG

stroke-linecap Thuộc tính định nghĩa các loại đỉnh khác nhau của đường mở:

Đây là mã SVG:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

Thử ngay

Thuộc tính stroke-dasharray của SVG

stroke-dasharray Thuộc tính được sử dụng để tạo đường gạch chéo:

Đây là mã SVG:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

Thử ngay