我正在使用一種 svg 材質，其中包含兩種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有什么辦法可以只為綠線中出現的紅線生成紅線？我期望的最終目標是實作以下 where 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>uj5u.com熱心網友回復：
確保不要兩次使用相同的 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486847.html