CODEWITHSUNDEEP
javascriptsvgbonsaijs
Wallysson Nunes
Wallysson Nunes

Reputation: 750

Masked boxes still call functions

There's a way to attach a event like mouse over into a mask? This example shows my problem: http://goo.gl/DRhsH

When you pass the mouse NEXT to the blue box, it changes the color from the mask, what i would like to do is to just call that event WHEN the mouse pass over blue box (Not near - This happen beucause the blue and red boxes are masked with another rect, and when you pass the mouse near them) , because i need to work with only the displayed image, and binding a event like that should solve my problem.

i tried to bind the click/mouseover into a group but it keeps the same result, the whole image is acessible, and not just the part viewed. I also tried to clip it, but it keep tracking the content clipped

Upvotes: 0

Views: 91

Answers (1)

Thomas W
Thomas W

Reputation: 15391

Edit: Replaced the previous answer as did things improperly and bonsaijs apparently won't allow clipping.

I'd suggest using the mask path as a clip path as well, but bonsiajs doesn't seem to support that. Anyway, here's an SVG structure that triggers events as you intended. If this can't be generated using bonsaijs, maybe you can do it in another way.

<svg width="596" height="596" viewBox="-0.5 -0.5 596 596" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="mask">
      <path d="M 0 0 l 50 0 l 0 150 l -50 0 Z" fill="rgba(255,255,0,1)"
        transform="matrix(1,0,0,1,80,0)" id="maskPath"/>
    </mask>
    <clipPath id="clipPath">
      <use xlink:href="#maskPath"/>
    </clipPath>
  </defs>
  <g>
    <g mask="url(#mask)" clip-path="url(#clipPath)" onmouseover="alert('in')">
      <path d="M 0 0 l 100 0 l 0 100 l -100 0 Z" fill="rgba(255,0,0,1)"/>
      <path d="M 0 0 l 100 0 l 0 100 l -100 0 Z" fill="rgba(0,0,255,1)"
        transform="matrix(1,0,0,1,50,50)"/>
    </g>
  </g>
</svg>

Upvotes: 0

Related Questions