Cómo cortar un agujero en un rectángulo SVG

Question

Así que, básicamente, como dice mi título, quiero "cortar un agujero" en un elemento rect.

Tengo dos elementos rect, uno encima del otro. El que está en la parte inferior tiene un color de relleno de blanco, y el que está en la parte superior tiene un color gris de relleno.

Lo que quiero hacer es cortar un triángulo del elemento rect superior para que se vea el elemento rect a continuación.

Este elemento svg se va a utilizar como un botón de audio para un reproductor multimedia en una página. En otras palabras, podrá hacer clic (o arrastrar) su mouse hacia la izquierda/derecha y el cambio en el nivel de audio se representará mediante un cambio en el ancho del elemento rect en la parte inferior, que se muestra a través del triángulo recortado del elemento rect superior.

Espero que no sea demasiado confuso. : P

Aquí está una maqueta rápida de lo que debe ser similar: http://forboden.com/coding/s1.png

Aquí está mi código: http://forboden.com/coding/svgClipTest.html

dónde voy mal aquí?

Answer 1

La manera más fácil es usar <path> con el agujero, y establecer eventos de puntero a none para que los eventos puedan pasar al <rect> debajo. Por supuesto, hay muchas otras maneras de manejar eventos como envolverlos con un <g> y manejar eventos en él.

No necesita limitarse a las formas básicas y utilizar el recorte complicado. Haga las cosas lo suficientemente seguras para que pueda copiar & datos de ruta de pegado generados por herramientas como inkscape.

Answer 2

Veo que ya lo ha resuelto, solo quería agregar que si quiere algo más avanzado, a menudo es bastante fácil usar un <mask>, vea http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg por ejemplo.

Sin embargo, si puede evitar el enmascaramiento y recorte (por ejemplo, simplemente dibujando cosas en la parte superior) que generalmente conduce a un mejor rendimiento/experiencia del usuario.

Answer 3

Debe poder usar la propiedad fill-rule: evenodd (valor predeterminado) para lograr este efecto, si desea evitar que el relleno del rectángulo pinte dónde está el círculo. Ver this example from the SVG specification:

El punto clave es dibujar forma exterior y las formas internas (agujeros) en dirección diferente (a la derecha vs anti-horario).

• Dibuje la forma exterior en el sentido de las agujas del reloj y dibuje las formas internas (agujeros) en el sentido contrario a las agujas del reloj.
• O, a la inversa, dibuje la forma exterior (agujeros) en el sentido contrario a las agujas del reloj y dibuje las formas internas en el sentido de las agujas del reloj.
• Concat la ruta de datos de la forma exterior y las formas interiores (agujeros).

Puede cortar más agujeros por medio de más datos de orificio.

Esta imagen explica cómo cortar un agujero: "¿Dónde estoy haciendo mal aquí"