0

Is it possible to create for example circular hole in rectangle element in Snapsvg? I tryed to use white and black elements and mask function but i cant figure it out. Most results was inverted (i saw only circle with color of rectangle) or no effect at all. And searching google does not helping either - only relevant thing i found was that but when i tryed to replicate it using Snapsvg it did not work so well as i tryed to describe it before (i must admit, im not fully sure if it was mine fault or its because snapsvg mask handling).

Its realy important it will be simple solution using rectangle and not something using paths or simillar things.

What im trying to achieve is simillar to gamemaker surfaces - dark foreground with hole (light) i could see background trought it.

Example

Also im looking for solution which could handle more than one circle hole in element and dynamic position changes.

Thx for any answer, i hope it is even possible.

PS: sorry for my english, im not from english speaking country

Community
  • 1
  • 1
astromedia
  • 75
  • 7

1 Answers1

1

Here you go. I've loosely recreated your image. I've made a black rectangle with a hole in it that you can see a green background through.

var s = Snap("#svg");

// Make a green rectangle. Something for us to see through the mask.
var greenbg = s.rect(0,0, 400,300);
greenbg.attr({
    fill: "darkseagreen"
});

// Now create the mask.
// We want the mask to be a hole through a rectangle, so the mask
// needs to be a white (solid) rectangle with a black (hole) circle
// on top of it.
var maskrect = s.rect(0,0, 400,300);   // the rect
maskrect.attr({
    fill: "white"
});
var maskcircle = s.circle(140,130, 80);  // the circular hole
// Now group these two items to create the combined object that becomes the mask.
spotlightmask = s.group(maskrect, maskcircle);

// Add a black foreground rectangle that we will apply the mask to.
var blackfg = s.rect(0,0, 400,300);
// Attch the mask to the black foreground rect.
blackfg.attr({
    mask: spotlightmask
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="svg" width="500" height="500"></svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Nice, thx. I see, i have to use rectangle in that mask. I would not guess that. (I was experimenting only with circles). Theese masks can be so confusing :). Marked as solution and thx again. – astromedia Sep 01 '15 at 05:59
  • Not that confusing. Anything white is solid, anything black is transparent. If you want something solid to have a hole in it, you need to make the non-hole bits of your mask white. – Paul LeBeau Sep 01 '15 at 07:04