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

Question

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

В w3.js включены такие работы:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

0

svg html firefox

задан Tony 18 January 2019 в 06:14

1 ответ

Другие вопросы по тегам:

svg html firefox

Похожие вопросы:

score 0 · 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>

[119 ] Но обратите внимание, что предстоящий Firefox 66 теперь будет вести себя как другие поставщики, не блокируя событие на родительской кнопке <>. Вы уже можете попробовать это из ночной ветки. [ эмиссионный доклад ]