Tailwind CSS - SVG Stroke Width
Tailwind CSS SVG SVG Stroke Width 类，用于设置 SVG 元素的描边宽度。有三种描边宽度可用于设置 SVG 描边的宽度。
Tailwind CSS SVG Stroke Width 类
以下是 Tailwind CSS SVG Stroke Width 类的列表，这些类提供了一种有效处理 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>
