1

.on()jQuery 、 SVG xlink、および Internet Explorer / Safariの組み合わせでかなり厄介な問題に遭遇したようです。

削減されたケースの例は次のとおりです: http://codepen.io/mikehdt/pen/MwqORK

この例には 2 つのボタンがあります。1 つは SVG を使用し、もう 1 つは SVG コードを直接埋め込みます。

SVG とボタンは次のようになっています (ドキュメントの後半にあるものを.icons-svg試してみると、Safari が悲しくなるように見えるので、最初に注意してください)。xlink

<div class="icons-svg"><svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 1792 1792" id="icon-plus"><title>plus</title><path d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"></path></symbol></svg></div>

<a href="https://www.google.com" class="button">
  <span>Hey, what are you doing?</span>
  <svg class="icon icon-plus"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-plus"></use></svg>
</a>

<a href="https://www.google.com" class="button">
  <span>Hey, what are you doing?</span>
  <svg width="100%" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/></svg>
</a>

見栄えを良くするためのいくつかの超基本的な CSS:

.button {
  position: relative;
  display: inline-block;
  width: 100px;
  padding: 10px;

  background-color: #ccc;
}

.icon {
  width: 100%;
  fill: currentColor;
}

.icons-svg {
  display: none;
}

jQuery は、次のように、動的バインディングのために on を使用しています。

$(function(){
    $(document).on('click', '.button', function(event){
        event.preventDefault();

        alert('You clicked the button');
    });
});

Chrome や Firefox と同様に、SVG を使用するリンクの + をクリックすると、警告メッセージが表示されます。ただし、IE と Safari では、イベントを防止してリンクをたどるスクリプトのトリガーに失敗します。

埋め込まれている SVG をクリックすると意図したとおりに直接動作しますが、アセットを適切に再利用するには、これは実行不可能なソリューションです。

機能するもの：

使用せずに使用する.on()と.click()、すべてのブラウザーが機能しますが、動的バインディングが失われます。使用.on()しても使用しない場合xlinkは、すべてのブラウザーが機能します。この問題が発生するのは、.on()との組み合わせだけです。xlink

なぜこれを行うのですか？

アイコンに SVG を使用する場合は、リソースを外部に保持し (したがってキャッシュ可能)、動的バインディングを必要とする Ajax イベントをサイトに配置します。

他の誰かがこれに遭遇したことがありますか？この組み合わせで IE と Safari をうまく動作させることができましたか? これはブラウザや jQuery のバグでしょうか、それとも Chrome と Firefox が誤って対処しているものでしょうか?

4

1 に答える 1

0

私もこの問題に直面しています。SVG タグの周りに通常のアンカー ( <a>) があっても、Javascript/jQuery は必要ありません。

私が見つけた解決策は、次の css を設定することです。

pointer-events: none;

要素上svg。

このように、SVG 要素はポインター イベントをキャプチャせず、この場合はアンカーにバブルアップし、jQuery をトリガーします。

他の修正または回避策を既に見つけたかどうかわかりませんか?

于 2016-11-25T07:27:16.430 に答える