SVG: Maske funktioniert nicht wie erwartet

Ich habe dieses eher einfache SVG mit einer vertikalen Linie durch 4 Kreise. Die Maske, die ich für die vertikale Linie habe, hat dieselbe Definition wie die Linie selbst, der einzige Unterschied ist die Strichfarbe (in diesem Fall #fff), weil ich durch die Maske hindurch sehen möchte. Aus unbekannten Gründen verhält sich die Maske jedoch immer noch so, als ob die Farbe schwarz wäre, wodurch das Element verborgen bleibt. Wenn jemand weiß, warum es sich so verhält, lass es mich wissen.SVG: Maske funktioniert nicht wie erwartet

<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. Habe einfach angefangen, mit SVG herumzubasteln, aber das (das Element verschwindet) passiert, egal welche Form ich in der Maske definiere oder welche Farbe ich dieser Form gebe.

Quelle

2016-11-05 Cosmin Pislariu

SVG ist nicht wie CSS, es verwendet nicht die Strichbreite bei der Berechnung von Bemaßungen für Masken und Filter. Sie können also keine Form wie eine horizontale oder vertikale Linie maskieren (Nullhöhe/Nullbreitenbegrenzung) Box) mit Standardmaskenparametern. Fügen Sie einfach „maskUnits =“ userSpaceOnUse“, um Ihre Maskenelement zu befestigen.

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

Quelle

2016-11-05 18:17:53

Perfect, dass der Trick, ich danke Ihnen so sehr. Es ist eine seltsame Wechselwirkung though. Wurde ein paar Tests machen, um zu sehen, was los war und Wenn ich dieselbe Maske einer anderen Liniendeklaration zugewiesen habe, anders als rein horizontal oder rein vertikal, verhielt sich die Maske wie erwartet. Je mehr Sie wissen, denke ich. –

@CosminPislariu Letzter Absatz hier: https://www.w3.org /TR/SVG/coords.html#ObjectBoundingBoxUnits –

Wenn Sie die Maskeneinheiten nicht explizit angeben, wird die Maskengröße aus der Begrenzungsbox des maskierten Objekts abgeleitet. –

SVG: Maske funktioniert nicht wie erwartet

Antwort

Verwandte Themen