Safari零高度SVG路径不会触发鼠标事件

时间:2015-10-14 15:20:24

标签: javascript html svg safari

SVG PATH有两个没有笔划的顶点,有相同的y坐标,只对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中运行良好。

任何人都知道如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

我发现了这个问题。 当路径的终点'y坐标相同,并且笔划为无。时,看起来Safari不响应指针事件。

修复很简单: 只需使笔画非无

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