Tailwind CSS - SVG 描边宽度

Tailwind CSS SVG 描边宽度实用程序类用于设置 SVG 元素的描边宽度。可以使用三种描边宽度来设置 SVG 描边的宽度。

Tailwind CSS SVG 描边宽度类

以下是 **Tailwind CSS SVG 描边宽度** 类列表，它提供了一种有效处理 SVG 元素描边的方式。

类	CSS 属性
stroke-0	stroke-width: 0;
stroke-1	stroke-width: 1;
stroke-2	stroke-width: 2;

Tailwind CSS SVG 描边类的功能

**stroke-0:** 此类用于将描边级别设置为 0。
**stroke-1:** 此类用于将描边级别设置为 1。
**stroke-2:** 此类用于将描边级别设置为 2。

Tailwind CSS SVG 描边宽度类示例

以下示例说明了 Tailwind CSS SVG 描边宽度类实用程序。

设置 SVG 描边宽度

在此示例中，我们将创建三个 SVG 元素，并使用 Tailwind CSS SVG 描边宽度类为它们应用描边宽度。

示例

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS SVG Stroke Width Class
    </h2>
    <p class="mt-4 text-lg">Bell SVG stroke-0 Class</p>
    <svg class="stroke-0 fill-transparent stroke-blue-500 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path stroke-rule="evenodd" 
              clip-rule="evenodd" 
              d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 
                 19V32.5335C4.00017 32.8383 3.9145 3.1371 
                 3.75292 33.3956L0.912672 37.94C0.0801118 
                 39.2721 1.0378 41 2.60867 41H4.3917C44.9625 
                 41 45.9202 39.2721 45.0877 37.94L42.2474 
                 33.3956C42.0858 33.1371 4.0002 32.8383 42.0002 
                 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 
                 0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002 
                 43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
        </path>
    </svg>
    <p class="mt-4 text-lg">Bell SVG stroke-1 Class</p>
    <svg class="stroke-1 fill-transparent stroke-blue-500 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path stroke-rule="evenodd" 
              clip-rule="evenodd" 
              d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 
                 19V32.5335C4.00017 32.8383 3.9145 3.1371 
                 3.75292 33.3956L0.912672 37.94C0.0801118 
                 39.2721 1.0378 41 2.60867 41H4.3917C44.9625 
                 41 45.9202 39.2721 45.0877 37.94L42.2474 
                 33.3956C42.0858 33.1371 4.0002 32.8383 42.0002 
                 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 
                 0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002 
                 43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
        </path>
    </svg>
    <p class="mt-4 text-lg">Bell SVG stroke-2 Class</p>
    <svg class="stroke-2 fill-transparent stroke-blue-500 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path stroke-rule="evenodd" 
              clip-rule="evenodd" 
              d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 
                 19V32.5335C4.00017 32.8383 3.9145 3.1371 
                 3.75292 33.3956L0.912672 37.94C0.0801118 
                 39.2721 1.0378 41 2.60867 41H4.3917C44.9625 
                 41 45.9202 39.2721 45.0877 37.94L42.2474 
                 33.3956C42.0858 33.1371 4.0002 32.8383 42.0002 
                 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 
                 0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002 
                 43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
        </path>
    </svg>
</body>

</html>

条件 SVG 描边宽度

在以下示例中，我们将创建一个 SVG 元素，并设置一个条件以在悬停时更改描边宽度。通常，SVG 元素将具有特定颜色的 1 描边宽度，而在悬停时，它将更改为 2 描边宽度。

示例

<!DOCTYPE html>
<html>
    <head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS SVG Stroke Width Class
    </h2>
    <p class="mt-4 text-lg">Hover Over the Bell</p>
    <svg class="stroke-1 fill-transparent stroke-green-600 
                hover:stroke-2 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path stroke-rule="evenodd" 
              clip-rule="evenodd" 
              d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 
                 19V32.5335C4.00017 32.8383 3.9145 3.1371 
                 3.75292 33.3956L0.912672 37.94C0.0801118 
                 39.2721 1.0378 41 2.60867 41H4.3917C44.9625 
                 41 45.9202 39.2721 45.0877 37.94L42.2474 
                 33.3956C42.0858 33.1371 4.0002 32.8383 42.0002 
                 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 
                 0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002 
                 43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
        </path>
    </svg>
    
</body>

</html>

打印页面