formato - svg illustrator

¿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 se verí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 es el recorte, 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

Debe usar una <path> si desea usar fill-rule . Pero ciertamente es posible cambiar el radio de un círculo que es una subruta de <path> , solo necesita dominar el comando de ruta de arco .

Answer 2

Debería poder usar la propiedad fill-rule: evenodd para lograr este efecto, si desea evitar que el relleno del rectángulo fill-rule: evenodd dónde está el círculo. Consulte este ejemplo de la especificación SVG (la imagen siguiente solo se mostrará si su navegador admite SVG):

Por alguna razón, parece que no puedo hacer que esto funcione con formas como la rect y la ellipse que proporcionaste en la pregunta. Aquí está mi intento :

Answer 3

Debes usar el elemento path para hacer un hoyo.

Vea el ejemplo de la especificación SVG : (puede hacer clic en este enlace o en la siguiente imagen para ver el archivo svg real)

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

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

• Dibuje la forma externa 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, dibuja la forma exterior (agujeros) en el sentido contrario a las agujas del reloj y dibuja las formas interiores en el sentido de las agujas del reloj.
• Concat los datos de ruta de la forma exterior y las formas interiores (agujeros).

Puede cortar más agujeros por concat más datos de ruta de agujero.

Esta imagen explica cómo cortar un agujero:

Consulte los documentos de w3c: Comandos de arco SVG y propiedad de regla de relleno de SVG .

Answer 4

Desafortunadamente, parece que no hay forma de hacer esto. 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.