SVG mask always turns element invisible

Question

I'm using Chrome 49.0.2623.87 (64-bit) on Ubuntu 15.10. Doesn't work in Firefox either.

I have the following code using svg.js:

function blockmouseenterHandler(){
    console.debug('mouseenter')
    var mask = anatomy.frame.rect(100,100).move(0,0).addClass('hovermask').fill({ color: '#000'});
    this.maskWith(mask);
}

The mask/defs it creates:

The masked element:

No matter what fill color I use on the mask, it always turns the masked element completely invisible. From what I understand, only a color of #fff should make it completely transparent, #000 should not mask at all, and values in between should give partial transparency, correct?

Update: https://jsfiddle.net/cmuyebma/

Paul LeBeau · Accepted Answer

Your mask consists of a 100x100 black rectangle. Black in a mask represents transparent.

So you are masking your target element with a mask that represents transparent. So it becomes invisible.

If you want a 100x100 section of your target element to be visible, then you should make the mask rectangle white.

If you want a 100x100 hole in your target element, then you should have a completely white mask with a 100x100 black rectangle on top (representing the hole).

SVG mask always turns element invisible

Answers (1)

Related Questions