具有 2 个顶点、无笔划、具有相同 y 坐标的 SVG 路径仅在 Safari 中不响应 mouseevent。

请注意，端点顶点的 y 坐标是相同的:

<div class="container"> 
    <section class="ui-interactable-content" style="transform: scale(1); width: 100%; height: 100%;"><svg class="path-selection-svg"> 
        <path class="path-selection-svg-path" d="M 4 4 L 92.99999999999994 4"></path> 
        <path class="path-selection-svg-shape" d="M 4 4 L 92.99999999999994 4"></path> 
        </svg> 
    </section> 
</div>     

效果重现如下: http://jsfiddle.net/mf6ueqef/

这在 Chrome、IE、FF 中运行良好。

有人知道如何解决这个问题吗？

请您参考如下方法:

我发现了这个问题。 当路径的端点 y 坐标相同且笔划为无时，Safari 似乎不会响应指针事件。

修复方法很简单: 只需将笔划设置为非无

stroke: rgba(255,0,0,0.01);