CODEWITHSUNDEEP
htmlcsssvg
klodoma
klodoma

Reputation: 4599

Pointer events on overlaying SVG elements

I have the following example:

http://jsfiddle.net/klodoma/3m3dmdtw

I would like to show the "cursor: pointer" over some elements in these SVG files, even add on click events. The SVGs are overlaying.

How can I add a mouse-over on the "underlying element" - the blue rectangle? Is it even possible?

  <path fill="#000000" stroke="#000000" d="M338,293L338,293L164,230L164,230M338,293L934,307L733,59L164,230" stroke-width="30" stroke-opacity="0" fill-opacity="0" class="el-seq-7591 el-model-7591-76627 el-model-76627" transform="matrix(1,0,0,1,-76,79)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 0; fill-opacity: 0; cursor: pointer;"></path>

enter image description here

Upvotes: 2

Views: 2362

Answers (1)

klodoma
klodoma

Reputation: 4599

Ok, I have found the solution.

The answer lies in "pointer-events: none;" which you can put on the "parent" element; this means that all pointer events from the child elements with "pointer-events: all" will be forwarded.

Solution in:

http://jsfiddle.net/klodoma/ox6pwjt2/

.stage-item {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  pointer-events: none;
}

.el-seq-7591 {
  pointer-events: all;
}

Upvotes: 4

Related Questions