SVG

填充颜色

用于设置 SVG 元素填充样式的工具类。

none
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
windi.config.js
export default {
  theme: {
    fill: theme => ({
      red: theme('colors.red.500'),
      green: theme('colors.green.500'),
      blue: theme('colors.blue.500'),
    }),
  },
}

Stroke Color

用于设置 SVG 元素画笔样式的工具类。

none
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
windi.config.js
export default {
  theme: {
    stroke: theme => ({
      red: theme('colors.red.500'),
      green: theme('colors.green.500'),
      blue: theme('colors.blue.500'),
    }),
  },
}

Stroke DashArray

stroke-dash 是一个定义虚线和间距图形的图像工具类, 被用于轮廓描边;

0
1
2
3
4
5
6
7
8
9
10
100
CSS

Stroke DashOffset

stroke-offset 是一个定义渲染相关 dash array 偏移的图像工具类。

0
1
2
3
4
5
6
7
8
9
10
50
60
70
80
90
100
CSS

Stroke LineCap

stroke-cap 是一个在开放子路径被设置描边的情况下, 定义开放自路径两端形状的图像工具类。

auto
square
round
CSS

Stroke LineJoin

stroke-join 是一个在路径绘制被设置描边的情况下, 定义路径转角处形状的图像工具类。

auto
bevel
round
CSS

Stroke Width

用于设置 SVG 元素画笔宽度样式的工具类。

0
1
2
3
4
5
6
7
8
9
10
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      strokeWidth: {
        sm: '4',
        lg: '8',
      },
    },
  },
}