Safari、SVG 不可点击 - 其他所有浏览器都可以使用答案

【问题标题】：Safari, SVG not clickable - every other browser worksSafari、SVG 不可点击 - 其他所有浏览器都可以使用
【发布时间】：2017-04-07 15:47:45
【问题描述】：

我的 SVG 有问题，但仅限于 Safari！

我有一个攀岩馆的“地图”，用户可以在其中选择一条线路/扇区以查看那里的所有路线。在 Chrome、Firefox 甚至 Internet Explorer 中一切正常^^

您可以在此处查看它的实际操作： http://www.climbtogether.at/routendatenbank/routes?center=test 只需单击按钮：“Übersichtsplan”或将语言更改为英语并单击“地图概览”！

svg 元素总是有一个 class="sector" 或 class="line" 然后我的 jquery 会监听点击！

$('.linie, .sektor').click(function (){
             table.search($(this).data("sektor")).draw();
             $('#search').val($(this).data("sektor")+' ');
             $('#uebersicht').modal('hide');
        });

我发现对于很多人来说pointer-events: none 的解决方案可以工作，但在我的情况下，如果我更改它，那么它在任何地方都不起作用..

还有一个用于悬停的 CSS 正常工作，但在 Safari 中不行！

有人可能有其他解决方案吗？

谢谢！

【问题讨论】：

您检查 Safari 控制台是否有错误消息？
是的，但没有任何与 svg 相关的错误消息..

标签： jquery svg safari

【解决方案1】：

好的，我知道了！这是因为我需要 Internet Explorer 的内联样式设置：

width: 100%; padding-bottom: 85%; height: 1px; overflow: visible; box-sizing: content-box;

所以现在我只需要找到一种方法来在有人使用 IE 访问我的网站时设置这些样式！

【讨论】：