¿Cómo puedo cortar una forma dentro de otra?

Question

¿Hay alguna manera de cortar una forma de otra en SVG? Por ejemplo, tengo rect y elipse y quiero hacer un rect con un agujero transparente en el medio. Me imagino que sería algo como esto:

<set operation="difference" fill="black"> 
    <rect x="10" y="10" width="50" height="50/> 
    <ellipse cx="35" cy="35" rx=10 ry=10/> 
</set> 

Lo más cercano que puedo encontrar está saturando, que me dará la intersección de dos formas. En mi ejemplo, eso daría como resultado que el agujero sea sólido y que el resto sea transparente.

Miré a través de Inkscape y hay una opción de diferencia en el menú de ruta, pero esto convierte las formas en rutas y luego crea una nueva ruta. La identidad de las formas se pierde, por lo que no hay una manera fácil de, por ejemplo, ingresar al archivo svg y cambiar el radio de la elipse.

¿Hay alguna idea de cómo podría hacer esto?

Answer 1

Debería poder usar la propiedad fill-rule: evenodd 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 (imagen de abajo sólo se mostrará si su navegador soporta SVG):

Por alguna razón, me parece que no puede conseguir esto para trabajar con formas como la rect y ellipse que se proporciona en el pregunta. Here's my attempt:

Answer 2

Desafortunadamente, parece que no hay forma de hacerlo. Ni SVG 1.0 ni SVG 1.1 no admiten operaciones de forma booleana, el recorte es compatible por otros motivos. Lo más cercano que puede obtener es tratar de obtener una forma "invertida" para hacer el recorte.

Answer 3

Es necesario utilizar un <path> si desea utilizar fill-rule. Pero ciertamente es posible cambiar el radio de un círculo que es un subtrayecto del <path>, solo necesita dominar el arc path command.

Answer 4

Debe usar el elemento path para hacer un agujero.

Ver the example from the SVG specification: (puede hacer clic en esta imagen siguiente enlace o para ver el archivo SVG reales)

<g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3"> 
    <path d="M 250,75 L 323,301 131,161 369,161 177,301 z"/> 

    <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z 
      M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z"/> 

    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z 
      M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z"/> 
</g> 

---

para su caso:

<path d="M10 10h50v50h-50z M23 35a14 10 0 1 1 0 0.0001 z" 
    stroke="blue" stroke-width="2" fill="red" fill-rule="evenodd" /> 

M10 10h50v50h-50z dibujará un rect.

M25 35a10 10 0 1 1 0 0.0001 z dibujará una elipse.

fill-rule="evenodd" hará el agujero.

---

El punto clave es dibujar la forma exterior y las formas internas (agujeros) en diferentes direcciones (en sentido horario vs antihorario).

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

Ver documentos del W3C: SVG Arc Commands y SVG fill-rule Property.