マスクされた要素のSVGマスクがクリッピングストローク

Question

私は完全に垂直の<path>を太いストローク幅で適用しました。私はマスクを追加したいと思います（つまりmask="url(#...)"）、私がすると（どのように置くのですか？）、可視領域を計算するときにストロークは無視されます。ここでは、コードスニペットです：

function toggleMask() { 
 
    var path = $('path'); 
 
    if (path.attr('mask')) { 
 
    path.removeAttr('mask'); 
 
    } else { 
 
    path.attr('mask',"url(#test)"); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div><button onclick="toggleMask()">toggle mask</button></div> 
 
<svg width="400" height="400"> 
 
    <defs> 
 
    <mask id="test"> 
 
     <rect 
 
      width="100%" 
 
      height="100%" 
 
      x="0" 
 
      y="0" 
 
      fill="white"> 
 
     </rect> 
 
     <circle r="20" cx="35" cy="80" fill="black"></circle> 
 
    </mask> 
 
    </defs> 
 
    <path 
 
     d="M30,30L30,300" 
 
     stroke-width="40" 
 
     stroke="black"></path> 
 
    <path 
 
     d="M50,30L100,300" 
 
     stroke-width="40" 
 
     stroke="black"></path> 
 
</svg>

が、私はこのような何かを見るために適用されるマスクを期待：

​​

おかげで事前に！

Answer 1

マスクにmaskUnits="userSpaceOnUse"を追加すると、必要に応じて機能します。

https://codepen.io/nerdmanship/pen/XazJVR

理由は、maskUnits属性はマスクがターゲット要素のバウンディングボックスの内側の領域に適用されることを意味するobjectBoundingBox値に指定されていないことは、デフォルトであるとき。完全に垂直または水平なパスの境界ボックスの幅は、またはの高さが0です。その結果、マスクはターゲット要素の合計0ピクセルに適用されます。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/maskUnits