SVG clipPath clip die *äußeren* Inhalte aus

Normalerweise die <clipPath> element verbirgt sich alles, was outshide der clip-Pfad. Zu erzielen den gegenteiligen Effekt - das "cut out" etwas aus dem Bild - ich möchte zwei Pfade in der clipPath und die clip-rule="evenodd" Attribut. Im Grunde will ich "xor" die clip-Pfade.

Aber es funktioniert nicht. Es zeigt die region "ORed":

<clipPath clip-rule="evenodd" id="imageclippath" clipPathUnits = "objectBoundingBox">
        <rect clip-rule="evenodd" x="0.3" y="0.3" height="0.6" width="6" />
        <rect clip-rule="evenodd" x="0" y="0" height="0.5" width="0.5" />
    </clipPath>     

 <rect clip-path="url(#imageclippath)" x="0" y="0" height="500" width="500" fill="red"/>

EDIT:

Mein problem ist, dass AFAIK <mask> funktioniert nicht in iOS WebKit.

InformationsquelleAutor der Frage tillda | 2011-01-27

  1. 27

    Ist es viel einfacher, das zu tun, was Sie nach mit eine Maske, sehen dieses Beispiel. Hier ist die Maske definition:

    <mask id="maskedtext">
  <circle cx="50%" cy="50%" r="50" fill="white"/>
  <text x="50%" y="55%" text-anchor="middle" font-size="48">ABC</text>
</mask>

    Regionen, die weiß sind innerhalb der Maske gehalten wird, alles andere wird abgeschnitten werden entfernt.

    Hier ein weiteres Beispiel verwendet clipPath statt, ist ein bisschen schwieriger, da Sie benötigen, um ein Pfad-element, um die clip-Regel anwenden. Die clipPath verwendet, clip-Regel sieht wie folgt aus:

    <clipPath id="clipPath1">
  <path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/>
</clipPath>

    InformationsquelleAutor der Antwort Erik Dahlström

Schreibe einen Kommentar