修改SVG路径厚度

Question

我想修改 bootstrap 4 复选框勾选 SVG 路径编号，但我不知道如何修改数字来实现此目的。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z" fill="red"/></svg>

我希望刻度线改成更细的线。关于CSS边框的厚度：2px；

有 SVG 专家吗？

谢谢

Answer 1

作为一个肮脏的解决方案，您可以使用

stroke

和

stroke-width

属性：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
    <path stroke="white" stroke-width="1.7px" d="M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z" fill="red"/>
</svg>

但是这只会创建特定颜色的边框。所以你只能在合适的背景上使用图像。

Answer 2

感谢提供的解决方案@Kim，我能够将这个想法与顺风结合使用：

https://play.tailwindcss.com/7y5xqcwASX

由于 Font Awesome 的 SVG 图标通常对于 Solid 样式是免费的，而不是对于 Regular、Light 或 Thin 样式，因此我能够使用 hack 来创建这些样式并支持深色模式！

关键类是：描边-白色深色：描边-灰色-950描边-[1.25rem]