SVG clipPath pour le clip de la *externe* contenu

Normalement, le <clipPath> élément cache tout ce qui est outshide du clip. Pour atteindre l'effet inverse - c'est-à "couper" quelque chose à partir de l'image - je veux utiliser deux chemins dans la clipPath et la clip-rule="evenodd" attribut. Fondamentalement, je veux "xor" les chemins de détourage.

Mais ça ne fonctionne pas. Il montre la région "par un ou binaire":

<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:

Mon problème est que, autant que je sache <mask> ne fonctionne pas sous iOS WebKit.

OriginalL'auteur tillda | 2011-01-27

  1. 27

    Il est beaucoup plus facile de faire ce que vous êtes après, avec un masque, voir cet exemple. Voici la définition de masque:

    <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>

    Régions qui sont blanches à l'intérieur du masque seront conservés, tout le reste sera découpé à l'écart.

    Voici un autre exemple qui utilise clipPath au lieu de cela, est un peu plus compliqué car vous avez besoin d'utiliser un chemin d'accès de l'élément pour obtenir le clip-la règle à appliquer. Le clipPath qui utilise clip-règle, il ressemble à ceci:

    <clipPath id="clipPath1">
  <path id="p1" d="M10 10l100 0 0 100 -100 0ZM50 50l40 0 0 40 -40 0Z" clip-rule="evenodd"/>
</clipPath>
    Merci. J'ai oublié d'ajouter que je ne peux pas obtenir <mask> de travail à WebKit iOS. À l'aide de <path> fonctionne, mais il est difficile de spécifier une ellipse par des points, par exemple.
    Vous pouvez spécifier une ellipse à l'aide de la trajectoire en arc de commande ou un couple de la courbe de commandes, voir la section w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands.

    OriginalL'auteur Erik Dahlström