SVG中如何遮罩描边路径部分区域？动态线长场景实现困惑

Great question—this comes down to remembering how SVG masks actually work, which is easy to mix up at first! Let’s break this down step by step.

First, Let’s Recap Mask Basics #

SVG masks use color values to control visibility:

• White: Shows the underlying element fully
• Black: Hides the underlying element completely
• Gray values: Create partial transparency
• Important: Masks have a default background of black (invisible), so any area not covered by white (or light gray) will hide your element.

Why Your "Reverse" Attempt Didn’t Work #

Your goal is to hide the first 10 pixels of the blue line (from M0,0 to L0,10). When you tried using just:

<rect width="20" height="10" x="0" y="0" fill="white"/>

in your mask, you were telling the browser: "Only show the part of the line that overlaps with this white rectangle". Since the rest of the mask is default black, the other 90 pixels of the line got hidden—exactly the opposite of what you wanted.

The Correct "Reverse" Approach (Better for Dynamic Lines) #

Instead of drawing only the visible area in white, you can flip the logic:

1. Start with a full-size white rectangle to make the entire line visible by default.
2. Draw a black rectangle over the section you want to hide.

This is way more flexible for dynamic line lengths, because you don’t need to calculate the visible portion’s height—you just define the area to hide. Here’s how that looks for your example:

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200">
    <defs>
      <mask id="chopmask" maskUnits="userSpaceOnUse">
        <!-- Step 1: Make the entire line area visible -->
        <rect x="0" y="0" width="20" height="100" fill="white"/>
        <!-- Step 2: Hide the first 10 pixels -->
        <rect x="0" y="0" width="20" height="10" fill="black"/>
      </mask>
    </defs>
    <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg>
</svg>

Key Takeaways #

• Always map your desired visibility to mask colors: Hide = black, Show = white
• For dynamic content, the "full white background + black hide overlay" pattern is more maintainable than calculating visible regions
• Your original implementation worked because you were drawing white only where you wanted the line to show—just the inverse of the pattern above

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