outside - SVG clipPath para recortar el contenido*externo*

show outside clip path

Question

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

Pero no funciona. Muestra la región "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"/>

EDITAR:

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

Answer 1

Es mucho más fácil hacer lo que buscas con una máscara, mira este ejemplo . Aquí está la definición de la 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í hay otro ejemplo que utiliza clipPath, pero es un poco más complicado ya que necesita usar un elemento de ruta para que se aplique la regla de clip. El clipPath que usa la regla de clip se ve así:

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