Tidadigi Logo

CSS stroke-dasharray Property

Thuộc tính stroke-dasharray được dùng để thiết lập mẫu nét đứt và khoảng trống cho đường viền của hình SVG. Giá trị lớn hơn chỉ ra nhiều nét đứt hơn. Bạn có thể chỉ định các giá trị khác nhau trong tham số array để thay đổi mẫu.

Cú pháp:

stroke-dasharray: <dasharray> | none

Giá trị thuộc tính:

  • dasharray: Dùng để thiết lập mẫu với danh sách các giá trị cách nhau bằng dấu phẩy hoặc khoảng trắng. Các giá trị có thể là đơn vị độ dài hoặc phần trăm để chỉ định nét đứt và khoảng trống.
  • none: Dùng để chỉ định không sử dụng mẫu nào. Đây là giá trị mặc định.

Ví dụ 1: Thiết lập mật độ nét đứt trong đường thẳng.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | stroke-dasharray property
    </title>
    <style>
        .stroke1 {
            stroke-dasharray: 20;

            stroke: green;
            stroke-width: 20;
        }

        .stroke2 {
            stroke-dasharray: 40;

            stroke: red;
            stroke-width: 20;
        }

        .stroke3 {
            stroke-dasharray: 80;

            stroke: orange;
            stroke-width: 20;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | stroke-dasharray
    </b>
    <div class="container">
        <svg height="250px" 
             width="500px" 
             xmlns="http://www.w3.org/2000/svg" 
             version="1.1">
            <line class="stroke1" x1="0" x2="350" y1="20" y2="20" />
            <line class="stroke2" x1="0" x2="350" y1="70" y2="70" />
            <line class="stroke3" x1="0" x2="350" y1="120" y2="120" />
        </svg>
    </div>
</body>
</html>

Đầu ra:

 css-stroke-dasharray-property 

Ví dụ 2: Thiết lập mật độ nét đứt trong hình tròn.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | stroke-dasharray property
    </title>
    <style>
        .stroke1 {
            stroke-dasharray: 10;

            stroke: green;
            stroke-width: 20;
        }

        .stroke2 {
            stroke-dasharray: 20;

            stroke: red;
            stroke-width: 20;
        }

        .stroke3 {
            stroke-dasharray: 40;

            stroke: orange;
            stroke-width: 20;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | stroke-dasharray
    </b>
    <div class="container">
        <svg height="250px" 
             width="500px" 
             xmlns="http://www.w3.org/2000/svg" 
             version="1.1">
            <circle class="stroke1" cx="100" cy="100" r="50" />
            <circle class="stroke2" cx="250" cy="100" r="50" />
            <circle class="stroke3" cx="400" cy="100" r="50" />
        </svg>
    </div>
</body>
</html>

Đầu ra:

 css-stroke-dasharray-property 

Ví dụ 3: Thiết lập mẫu cho các nét đứt.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | stroke-dasharray property
    </title>
    <style>
        .stroke1 {
            stroke-dasharray: 10;

            stroke: green;
            stroke-width: 20;
        }

        .stroke2 {
            stroke-dasharray: 20;

            stroke: red;
            stroke-width: 20;
        }

        .stroke3 {
            stroke-dasharray: 40;

            stroke: orange;
            stroke-width: 20;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | stroke-dasharray
    </b>
    <div class="container">
        <svg height="250px" 
             width="500px" 
             xmlns="http://www.w3.org/2000/svg" 
             version="1.1">
            <circle class="stroke1" cx="100" cy="100" r="50" />
            <circle class="stroke2" cx="250" cy="100" r="50" />
            <circle class="stroke3" cx="400" cy="100" r="50" />
        </svg>
    </div>
</body>
</html>

Đầu ra:

 css-stroke-dasharray-property

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính stroke-dasharray được liệt kê dưới đây:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9

Last Updated : 21/07/2025