Safari doesn't emit pointer events on overflowing SVG contents

前端 未结 2 1201
清酒与你
清酒与你 2021-02-19 06:56

I\'m trying to add click events to an SVG Element which has visible overflow and a shape element(circle/path) inside it which overflows the SVG.

On Safari(9,10,11), clic

相关标签:
2条回答
  • 2021-02-19 07:32

    Seems to be fixed in version 11.1 of Safari.

    0 讨论(0)
  • 2021-02-19 07:58

    This mirrors Webkit bug report #140723 here: https://bugs.webkit.org/show_bug.cgi?id=140723

    That bug report links to this codepen example reproducing the exact same results you've found: https://codepen.io/anon/pen/pvPQqY

    And with the fix as I've described below applied here:

    https://codepen.io/anon/pen/YeOmGW

    ===========

    Edited for clarity: The evidence is clear that the initial clipping is taking effect at the outer most view port (svg) boundary, while at the same time the overflow property is allowing the visibility of the shape outside that clipped area. In effect rendering the pointer events void.

    Said differently, evidence that clipping is applied IAW the first sentence here: http://w3.org/TR/SVG11/masking.html#AutoClipAtViewportNotViewBox , while at the same time conforming to the overflow rules (last three) here: http://w3.org/TR/SVG11/masking.html#OverflowAndClipProperties is the cause of this issue with Safari;

    To overcome this issue, the OP must create a wrapper viewport to create a (workaround) solution to the dilemma created by the inconsistent implementations.

    This is similar to adding any other HTML structure that might be required to wrap required content. (I'm really focused on helping solve the problem)

    Hope this helps.

    var count = 0;
    document.querySelector('svg').addEventListener('click',clickMe);
    
    function clickMe(e) {
      console.log("clicked on: " + e.target.id);
      count++;
      document.getElementById("counter").innerHTML = count;
    }
    #counter {
      font-size: 2em;
    }
    
    #starSvg {
      pointer-events: auto;
      position: absolute;
      width: 100%;
      height: 100%;
      left:0;
      top:0;
    }
    
    #starPolygon {
      transform: translate(50%, 50%) rotate(45deg);
      fill: rgba(0, 153, 219, 1);
      stroke-width: 4;
      stroke-linecap: square;
      stroke-linejoin: round;
      stroke: rgba(219, 0, 153, 1);
      cursor: pointer;
      shape-rendering: geometricPrecision
    }
    #starClip {
      width: 100%;
      height: 100%;
      stroke-width: 1;
      stroke: red;
      fill: transparent;
    }
    
    p {
      margin: 10px 0;
    }
    <div>
      <p>Open this webpage on Chrome &amp; safari</p>
      <p>On Chrome: Click work on all four hands of the star.</p>
      <p>On Safari: Click works only on the hands inside the red area(SVG bounding Rect).</p>
    
      <p style="position: absolute; top: 100px; left: 200px;">Click Event Counter:
        <span id="counter">0</span>
      </p>
      <div class="containter">
        <svg id="starSvg">
              <rect id="starClip" x="50%" y="50%"></rect>
              <g>
                <polygon id="starPolygon" x="0" y="0" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon>
              </g>
            </svg>
      </div>
    </div>

    0 讨论(0)
提交回复
热议问题