用于 svg 路径减去的蒙版复合

Question

我正在使用一个 svg material，其中包含两个 paths，一个纯绿色 中间有间隙 和一个红色虚线 中间没有间隙

红色虚线

<svg viewBox="0 0 1200 100">    
  <path id ='lineNoGap' d="M0,80L50,20L100,50L150,30L200,40L250,90L400,20L450,70L500,60" stroke="red" fill="none" stroke-dasharray="2" />  
</svg>

绿色实心

<svg viewBox="0 0 1200 100">      
  <path id ='lineWithGap' d="M0,80L50,20L100,50L150,30L200,40L250,90M400,20L450,70L500,60" stroke="green" fill="none" />
</svg>

有什么方法可以只为绿线中出现的 gap 生成红线？我期望的最终目标是实现以下 red line appears only for the gap in green line.

我尝试按以下方式使用 mask-composite，但没有用。

#dashedRedNoGap {  
mask:url(#solidGreenWithGap);
-webkit-mask-composite: exclude;    
}

<svg viewBox="0 0 1200 100">  
        <mask id="solidGreenWithGap">    
    <path d="M0,80L50,20L100,50L150,30L200,40L250,90L400,20L450,70L500,60" /> 
  </mask>
  <path id ='solidGreenWithGap' d="M0,80L50,20L100,50L150,30L200,40L250,90M400,20L450,70L500,60" stroke="green" fill="none" />
  <path id ='dashedRedNoGap' d="M0,80L50,20L100,50L150,30L200,40L250,90L400,20L450,70L500,60" stroke="red" fill="none" stroke-dasharray="2"/>  
 <!--<path id ='solidGreenWithGap' d="M0,80L50,20L100,50L150,30L200,40L250,90M400,20L450,70L500,60" stroke="green" fill="none" />-->   
</svg>

Answer 1

确保您没有使用同一个 ID 两次。在此示例中，遮罩由两条路径组成，填充路径为白色（透明），断开路径为黑色。这样就只剩下可见的缝隙了。此蒙版应用于红色虚线路径。

<svg viewBox="0 0 600 100">
  <mask id="mask1">
    <path d="M0,80L50,20L100,50L150,30L200,40L250,90L400,20L450,70L500,60" stroke="white" fill="none" stroke-width="10"/> 
    <path d="M0,80L50,20L100,50L150,30L200,40L250,90M400,20L450,70L500,60" stroke-width="10" stroke="black" fill="none" />
  </mask>
  <path d="M0,80L50,20L100,50L150,30L200,40L250,90M400,20L450,70L500,60" stroke="green" fill="none" />
  <path d="M0,80L50,20L100,50L150,30L200,40L250,90L400,20L450,70L500,60" stroke="red" fill="none" mask="url(#mask1)" stroke-dasharray="2"/>
</svg>

用于 svg 路径减去的蒙版复合

Mask-composite for svg path subtract

css

svg