Как сделать элемент SVG <image>кликабельным в FireFox

Question

Мне трудно заставить элемент svg кликать.

В Chrome все работает правильно, но в FireFox 64.0.2 элемент не имеет курсора и не активируется.

Изображение svg находится внутри тега div JQuery.Sticky со шириной 100%, в котором я должен установить указатель-событие: ни один из них не делает элементы в элементе div не кликабельными. Файл SVG загружен лениво. Это изображение кнопки внутри div должно быть кликабельным.

Я установил элемент изображения svg с помощью: inline style = "pointer-events: all;" Я также попытался установить то же самое с помощью класса ".roomopenico", который имеет то же самое. Я также попытался добавить класс с помощью запроса: $ ("# TreasureChest_Open"). Css ("pointer-events", "all"); ($ .addClass не работает с элементами SVG)

В Chrome все работает правильно, но не в FireFox 64.0.2. В FF элемент виден, но не имеет курсора и не кликабелен. Это ошибка Firefox или я что-то не так сделал?

Это мой стик, содержащий кнопку, использующую изображение 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, где это было "своего рода ожидаемое поведение", чтобы игнорировать события указателя на дочерних элементах 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 теперь будет вести себя как другие поставщики, не блокируя событие на родительском . Вы уже можете попробовать это из ночной ветки. [ эмиссионный отчет ]