Logo Windi CSS

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',
      },
    },
  },
}