SVG：マスクが期待通りに機能しない

Question

私はこの基本的なSVGを、4つの円を通る垂直線で示しています。私が垂直線に対して持っているマスクは、ライン自体と同じ定義を持っていますが、唯一の違いは、マスクを通して見ることができるので、ストロークカラー（この場合は#fff）です。しかし、知られていない理由から、マスクはまだ色が黒であるように作用し、したがって要素を隠す。誰かがなぜこのような行動をしているのか分かっているなら、私に知らせてください。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"> 

     <defs> 
      <mask id="education"> 
       <path class="through" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" d="M200 325.6v42.5M200 325.6V44.2"/> 
      </mask> 
     </defs> 

     <path class="arrow" fill="#C57773" d="M191.9 41.5l8.1-14 8.1 14"/> 
     <path style="mask: url(#education);" class="through" fill="none" stroke="#58595B" stroke-width="2" stroke-miterlimit="10" d="M200 325.6v42.5M200 325.6V44.2"/> 
     <path class="circle2" fill="#C95147" d="M200 234.7c-4.6 0-8.3 3.7-8.3 8.3s3.7 8.3 8.3 8.3c4.6 0 8.3-3.7 8.3-8.3s-3.7-8.3-8.3-8.3z"/> 

     <path class="circle1" fill="#C95147" d="M200 317.2c-4.6 0-8.3 3.7-8.3 8.3s3.7 8.3 8.3 8.3c4.6 0 8.3-3.7 8.3-8.3s-3.7-8.3-8.3-8.3z"/> 

     <path class="circle3" fill="#C95147" d="M200 152c-4.6 0-8.3 3.7-8.3 8.3 0 4.6 3.7 8.3 8.3 8.3 4.6 0 8.3-3.7 8.3-8.3 0-4.5-3.7-8.3-8.3-8.3z"/> 

     <path class="circle4" fill="#C95147" d="M200 67.1c-4.6 0-8.3 3.7-8.3 8.3s3.7 8.3 8.3 8.3c4.6 0 8.3-3.7 8.3-8.3s-3.7-8.3-8.3-8.3z"/> 

</svg> 

P.S.ただSVGを使い始めましたが、この要素（消え去る要素）は、マスクでどのような形を定義しても、その形をどのような色にしても発生します。

Answer 1

SVGはCSSと似ていません。マスクやフィルタの寸法を計算する際にストローク幅を使用しないため、水平または垂直線のような形状をマスクすることはできません（ゼロ高さ/ボックス）を使用します。ただ、修正するためにあなたのマスク要素に「maskUnits =」UserSpaceOnUseで」。

<mask id="education" maskUnits="userSpaceOnUse">