Tidadigi Logo

CSS | stroke-width Property

Thuộc tính stroke-width được sử dụng để thiết lập độ rộng của đường viền trong hình dạng SVG. Thuộc tính này chỉ có thể áp dụng cho các phần tử có hình dạng hoặc nội dung văn bản. Cú pháp: 
stroke-width: <length> | <percentage>
Giá trị thuộc tính:
  • length: Dùng để đặt độ rộng nét vẽ bằng đơn vị đo. Nó có thể nhận giá trị là số nguyên hoặc số thập phân phần trăm. Giá trị không bắt buộc phải có định danh đơn vị như 'px' hoặc 'em'. Giá trị không có đơn vị sẽ dựa trên hệ tọa độ của hộp xem SVG. Ví dụ 1: Ví dụ này đặt độ rộng nét vẽ mà không cần đơn vị. html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>CSS | stroke-width</title>
    
    <style>
        .stroke1 {
            stroke-width: 10;
            stroke: green;
        }
        .stroke2 {
            stroke-width: 30;
            stroke: red;
        }
        .stroke3 {
            stroke-width: 50;
            stroke: orange;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>CSS | stroke-width</b>
    
    <div class="container">
        <svg height="300px" width="400px"
            xmlns="http://www.w3.org/2000/svg">
            <line class="stroke1" x1="0" x2="250"
                y1="20" y2="20" />
            <line class="stroke2" x1="0" x2="250"
                y1="90" y2="90" />
            <line class="stroke3" x1="0" x2="250"
            y1="200" y2="200" />
        </svg>
    </div>
</body>

</html>
    Đầu ra: css-stroke-width-property Ví dụ 2: Ví dụ này đặt độ rộng nét vẽ bằng pixel. html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>CSS | stroke-width</title>
    
    <style>
        .stroke1 {
            stroke-width: 5px;
            stroke: green;
        }
        .stroke2 {
            stroke-width: 10px;
            stroke: red;
        }
        .stroke3 {
            stroke-width: 20px;
            stroke: orange;
        }
    </style>
</head>

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

</html>
    Đầu ra: css-stroke-width-property
  • percentage: Nó được dùng để thiết lập độ rộng nét vẽ theo phần trăm. Ví dụ: html 
    <!DOCTYPE html>
<html>
    
<head>
    <title>CSS | stroke-width</title>
    
    <style>
        .stroke1 {
            stroke-width: 1%;
            stroke: green;
        }
        .stroke2 {
            stroke-width: 2%;
            stroke: red;
        }
        .stroke3 {
            stroke-width: 3%;
            stroke: orange;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    
    <b>CSS | stroke-width</b>
    
    <div class="container">
        <svg height="300px" width="400px"
            xmlns="http://www.w3.org/2000/svg">
            <ellipse class="stroke1" cx="100"
                cy="50" rx="35" ry="25" />
            <ellipse class="stroke2" cx="100"
                cy="150" rx="35" ry="25" />
            <ellipse class="stroke3" cx="100"
                cy="250" rx="35" ry="25" />
        </svg>
    </div>
</body>

</html>
    Đầu ra: css-stroke-width-property
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính stroke-width được liệt kê dưới đây:
  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9

Last Updated : 21/07/2025