Restar un círculo de otro en SVG

Estoy tratando de encontrar una manera de restar una forma de otra en SVG, creando un agujero en el medio o un bocado de los lados de la misma. Como especie de un trazado de recorte, pero en vez de mostrar la intersección, quiero mostrar una de las partes fuera de la intersección. Una solución involucrados con Adobe Flex, pero no sé cómo aplicarlo correctamente. Entiendo que hay una manera de hacer esto en Inkscape utilizando booleano operaciones de trazado, pero quiero mantener el círculo de los elementos de la forma en que son, en lugar de convertirlas en elementos de la ruta.

<defs>
    <subtractPath id="hole">
        <circle r="50" cx="100" cy="100" />
    </subtractPath>
</defs>
<circle id="donut" r="100" cx="100" cy="100" subtract-path="url(#hole)" />

InformationsquelleAutor Iktys | 2014-03-22

4 Comentarios

58

Una máscara es lo que quieres. Para crear un <mask>, hacer las cosas que usted desea mantener el blanco. Las cosas que usted quiere ser invisible hacer negro. Colores entre resultará en la translucidez.

Por lo que la resultante SVG es similar a su pseudo-marcado y se parece a esto:

HTML:
```
<div style="background: #ddf">
  <svg width="200" height="200">
    <defs>
      <mask id="hole">
        <rect width="100%" height="100%" fill="white"/>
        <circle r="50" cx="100" cy="100" fill="black"/>
      </mask>
    </defs>

    <circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" />

  </svg>
</div>
```
Estamos llenando la máscara con un rectángulo blanco, y a continuación, ponemos un círculo negro donde queremos que el orificio.
- Sí, esto es lo que estoy buscando. Yo no había pensado en el uso de dos formas en la máscara. Funciona en mi navegador, pero para la vida de mí, no puedo conseguir que funcione en Inkscape. Todo lo que hace es mostrar sólo el círculo grande. Podría ser un error en Inkscape?
- Para responder a mi propia pregunta, va a trabajar en Inkscape, mientras un grupo contiene los elementos de la máscara.
- hay alguna forma de cambiar los colores? como si lo que quería el círculo negro de la pieza a ser de color blanco, y el medio círculo para ser translúcido?
- Sí, por supuesto. Sólo tienes que configurar el relleno: <circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" fill="white" />
- oh gosh… he jugado con tantas combinaciones en el enmascaramiento de objetos, pero no el enmascarado…todavía muy nuevo para enmascarar! Muchas gracias!
InformationsquelleAutor Paul LeBeau
15

El truco es usar relleno de la regla para controlar la visualización de un clip-path. Un (plaza) donut ejemplo sería
```
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 width="300" height="300">
<defs>
</defs>
   <g transform="translate(50, 50)">
      <path d="M 0 0 L 0 200 L 200 200 L 200 0 z
               M 50 50 L 50 150 L 150 150 L 150 50 z" fill-rule="evenodd"/>
   </g>
</svg>
```
Que utiliza el relleno de la regla de la propiedad de las formas para quitar el cuadrado interior – usted puede ajustar que hacer con trazados curva para crear un círculo como se requiere.

Una vez que tienes el básico de trazado de recorte crea, puede crear un trazado de recorte fuera de ella – ver esta entrada MDN para obtener información sobre el clip-path.

InformationsquelleAutor Brad Shuttleworth
2

Dos respuestas sugieren que (1) el uso de un <máscara> o (2) utilizar el «relleno de la regla=evenodd» atributo para restar una forma B de una forma Un (Un ∖ B).

Tanto las respuestas que se sugieren a resolver el «agujero en la media» (B ⊆ A) parte de la pregunta, pero sólo el máscara enfoque es una solución razonable para el «bocado del lado de la» parte (B ⊈ A). El uso de la evenodd de relleno de la regla quiere decir que las dos formas son tratados por igual, de modo que la parte de la segunda forma que no se intersectan con la primera de ellas será parte del resultado. En orden a morder algo de una forma de la «morder» forma tendría que compartir parte de su frontera con la mordido forma. Esto puede ser incómodo para lograr en la práctica.

Un ejemplo: para restar un círculo de otro círculo, se tendría que crear un «morder» la forma que es la intersección de los dos círculos.

La máscara de enfoque es mucho más universal.
- Esta realidad no responda a la pregunta original. Tengo miedo de presentarse como una respuesta de la que realmente se requiere. Si uno o ambos de las otras respuestas son eliminados sería difícil entender lo que usted quiere aquí.
- Gracias por señalarlo. Yo no era consciente de que las respuestas pueden ser eliminados. Así que supongo que la mía va a ser eliminado sin necesidad de ninguna otra acción.
- ¿Por qué no convertirlo en algo que no responder a las preguntas?
InformationsquelleAutor Renardo
1

|*| Máscara : se Utiliza para Restar Objetos :

|=> fill=»blanco» => Bloques para mostrar

|=> fill=»black» => Bloques para Eliminar

|=> fill=»blanco» => Poner la Pantalla de Bloque también en el interior de la máscara de etiqueta y relleno blanco

|=> fill=»black» => Poner Quitar el Bloque dentro de la máscara de la etiqueta y de relleno negro

|::| Ejemplo de uso de la mascarilla para eliminar el centro de la pequeña rect de gran rect
```
<rect x="20" y="20" width="60" height="60" mask="url(#rmvRct)"/>
<mask id="rmvRct">
    <rect x="20" y="20" width="60" height="60" fill="white"/>
    <rect x="40" y="40" width="20" height="20" fill="black"/>
</mask>
```
|::| Ejemplo de uso de la mascarilla para eliminar el centro de un pequeño círculo de círculo grande :
```
<circle cx="50" cy="50" r="45" mask="url(#rmvCir)"/>
<mask id="rmvCir">
    <circle cx="50" cy="50" r="45" fill="white"/>
    <circle cx="50" cy="50" r="25" fill="black"/>
</mask>
```
InformationsquelleAutor Sujay U N

4 Comentarios

Dejar respuesta Cancelar respuesta