Come tagliare un buco in un rettangolo SVG

Quindi, come dice il mio titolo, voglio “tagliare un buco” in un elemento retto.

Ho due elementi retti, uno sopra l’altro. Quello in basso ha un colore di riempimento di bianco, e quello in alto ha un colore di riempimento di grigio.

Quello che voglio fare è tagliare un triangolo fuori dall’elemento rect superiore in modo che l’elemento rect qui sotto sia visibile.

Questo elemento svg verrà utilizzato come pulsante audio per un lettore multimediale su una pagina. In altre parole, sarete in grado di fare clic (o trascinare) il vostro mouse sinistra / destra e il cambiamento nel livello audio sarà rappresentato da una modifica della larghezza dell’elemento rect in basso, che si manifesta attraverso il triangolo tagliato dell’elemento rect superiore.

Spero che non sia troppo confuso. : P

Ecco un rapido mockup di come dovrebbe essere: http://sofit.miximages.com/svg/s1.png

Ecco il mio codice: http://forboden.com/coding/svgClipTest.html

Dove sto andando storto qui?

Il modo più semplice è usare con il foro e impostare pointer-events su none modo che gli eventi possano passare al sotto. Naturalmente ci sono molti altri modi per gestire eventi come avvolgerli con un e gestire gli eventi su di esso.

Non è necessario limitarsi alle forms di base e utilizzare il clipping complicato. Rendi le cose abbastanza facili da poter copiare e incollare i dati del percorso generati da strumenti come inkscape.

Dovresti essere in grado di usare la fill-rule: evenodd (default) per ottenere questo effetto, se vuoi impedire che il riempimento del rettangolo fill-rule: evenodd dove si trova il cerchio. Vedi questo esempio dalle specifiche SVG :

Un pentagramma e due cerchi, riempiti di rosso, con i centri tagliati che mostrano lo sfondo bianco

Il punto chiave è disegnare la forma esterna e le forms interne (fori) in direzione diversa (in senso orario e antiorario).

  • Disegna la forma esterna in senso orario e disegna le forms interne (fori) in senso antiorario.
  • Oppure, al contrario, disegnare la forma esterna (fori) in senso antiorario e disegnare le forms interne in senso orario.
  • Concat i dati del percorso di forma esterna e forms interne (fori).

È ansible tagliare più fori concatiando più dati sul percorso del foro.

Questa immagine spiega come tagliare un buco:

inserisci la descrizione dell'immagine qui

Vedo che l’hai già risolto, volevo solo aggiungere che se vuoi qualcosa di più avanzato allora è spesso abbastanza facile usare un , vedi http://dev.w3.org/SVG/profiles/1.1F2/ prova / svg / masking-path-11-b.svg per esempio.

Tuttavia, se è ansible evitare il mascheramento e il ritaglio (ad esempio semplicemente disegnando le cose in primo piano) ciò porta solitamente a migliori prestazioni / user-experience.