SVG：面具不按預期工作

我有這個相當基本的SVG，垂直線穿過4個圓圈。我對垂直線的遮罩具有與線本身相同的定義，唯一的區別是筆觸顏色（本例中爲#fff），因爲我希望能夠看穿遮罩。但是，由於未知的原因，面具仍然像顏色是黑色一樣，從而隱藏了元素。如果有人知道它爲什麼會這樣，請告訴我。SVG：面具不按預期工作

<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，但這個（元素消失）發生，無論我在面具中定義的形狀或我賦予該形狀的顏色。

來源

2016-11-05 Cosmin Pislariu

SVG與CSS不同，它在計算遮罩和濾鏡的尺寸時不使用描邊寬度，所以不能遮蓋像水平線或垂直線那樣的形狀（零高度/零寬度邊界框）使用默認掩碼參數。只需添加「maskUnits =」 userSpaceOnUse」你的面具元件來解決。

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

來源

2016-11-05 18:17:53

完全，並獲得成功，謝謝你這麼多。這是一個奇怪的相互作用，雖然，在做一些測試，看看發生了什麼事情，並如果我將同一個遮罩分配給不同的行聲明，而不是純水平或純垂直，那麼遮罩的行爲與預期相同。我知道的越多，我猜也是如此。 –

@CosminPislariu最後一段在這裏：https：//www.w3.org /TR/SVG/coords.html#ObjectBoundingBoxUnits –

如果您未明確指定掩碼單位，則掩碼大小是從掩碼對象的邊界框中推斷出來的。 –

SVG：面具不按預期工作

回答

相關問題