如何修改Bootstrap 4复选框勾选SVG路径以实现2px细线条效果？

Got it, let's tweak that Bootstrap 4 checkbox SVG to get that thin 2px stroke you want! The original uses a filled shape, but we can adjust it to match your CSS border-style perfectly.

The Modified SVG Code #

Here's the adjusted version that gives you a clean, thin checkmark with a 2px-equivalent stroke (matched to typical Bootstrap checkbox sizing):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
  <path d="M1 4 l2 2 l4 -4" 
        stroke="red" 
        fill="none" 
        stroke-width="1" 
        stroke-linecap="round" 
        stroke-linejoin="round"/>
</svg>

Key Changes Explained #

Let's break down what we did to get the desired effect:

• Swapped fill for stroke: We removed the original fill="red" and added stroke="red" + fill="none" to render a line instead of a solid shape.
• Adjusted the path: The original path was a closed, filled polygon. We replaced it with a simple two-segment path (M1 4 l2 2 l4 -4) that draws the classic checkmark as a line.
• Stroke width matching: Since the SVG uses a viewBox="0 0 8 8", setting stroke-width="1" translates to a 2px stroke when rendered in Bootstrap's default 16px checkbox (1 unit in the viewBox = 2px on screen). If your checkbox is a different size, you can adjust stroke-width accordingly (e.g., stroke-width="2" for an 8px checkbox).
• Polished line ends: Added stroke-linecap="round" and stroke-linejoin="round" to make the line ends and corner smooth, which looks more polished and matches modern UI styles.

Testing It Out #

Just replace your original SVG with this code, and you'll get a checkmark that's the same thickness as a 2px CSS border. You can tweak the stroke color to match your theme if needed too!

内容的提问来源于stack exchange，提问作者Krys