SVG clipPath para recortar el contenido * externo *

Question

Normalmente, el elemento <clipPath> oculta todo lo que está más allá de la ruta del clip. Para lograr el efecto opuesto, es decir, "cortar" algo de la imagen, quiero usar dos rutas en clipPath y el atributo clip-rule="evenodd". Básicamente, quiero "xor" las rutas de clip.

Pero no funciona. Se muestra la región "un OR":

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

Mi problema es que yo sepa <mask> no funciona en iOS WebKit.

Answer 1

Es mucho más fácil hacer lo que está buscando con una máscara, consulte this example. Aquí está la definición de máscara:

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

Las regiones que son blancas dentro de la máscara se mantendrán, todo lo demás se recortará.

Aquí está another example que usa clipPath en su lugar, es un poco más complicado ya que necesita utilizar un elemento de ruta para aplicar la regla de clip. El clipPath que usa la regla de clip se parece a esto:

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