Question

我很难让svg元素可点击。

一切都可以在Chrome中正常运行，但是在FireFox 64.0.2中，该元素没有光标并且不可点击。

svg图像位于JQuery.Sticky div标签内，该标签具有100％的宽度，在其中我必须设置指针事件：无，因此不会使div下的项目不可点击。 SVG文件是延迟加载的。 div中的此按钮图片确实需要点击。

我已将svg图像元素设置为：内联样式=“ pointer-events：all;” 我还尝试通过具有相同名称的类“ .roomopenico”设置相同的名称。我也尝试过使用查询添加类：$（“＃TreasureChest_Open”）。css（“ pointer-events”，“ all”）; （$ .addClass不适用于svg元素）

一切都可以在Chrome中正常运行，但不能在FireFox 64.0.2中正常运行。在FF中，该元素可见，但是没有光标并且不可单击。这是FireFox的错误，还是我做错了什么？

这是我的粘性div，其中包含一个使用SVG图片的按钮：

<div id="DailyBonusMagnetWrapper" class="c" style="padding: 4px; width: 100%; pointer-events: none;">
    <button id="btn_dailybonusmagnet" style="background: transparent; border: 0; height: auto; width: 100%; display: block; margin-left: -10px;" title="6-Hour Bonus">
        <div id="db_box_open" class="c divlazymg">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 120" preserveAspectRatio="xMidYMid">
                <image id="TreasureChest_Open" class="roomopenico" style="pointer-events: all;" width="113" height="130" xlink:href="data:img/png;base64,iVBORw0KG....TOO LONG TO INCLUDE HERE...5sAAAAASUVORK5CYII="/>
            </svg>
        </div>
    </button>
</div>

Answer 1

这是HTML4时代的一个非常古老的遗迹，在HTML4时代，忽略HTMLButtonElement的子级上的指针事件是“某种预期的行为”。 Firefox，从一开始就遵循此规则。

为避免这种情况，解决方案是将元素包装在<button>之外的其他地方：

<div id="DailyBonusMagnetWrapper" class="c" style="padding: 4px; width: 100%; pointer-events: none;">
    <!-- replaced <button> by a <div>-->
    <div id="btn_dailybonusmagnet" style="background: transparent; border: 0; height: auto; width: 100%; display: block; margin-left: -10px;" title="6-Hour Bonus">
        <div id="db_box_open" class="c divlazymg">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 120" preserveAspectRatio="xMidYMid">
                <image id="TreasureChest_Open" class="roomopenico" style="pointer-events: all; cursor:pointer" width="113" height="130" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"/>
            </svg>
        </div>
    </div>
</div>

但是请注意，即将发布的Firefox 66现在将通过不阻止父

如何在Firefox中使SVG <img/>元素可点击

1 个答案: