変換後にSVG要素がイベントリスナーを失う

Question

親属性<svg>変換属性がプログラムによって変更されると、内部SVG要素の奇妙な動作が発生します。変更後は、CSSセレクタ（:hoverなど）も、JavaScriptのリスナー（onClick）も動作していません。 <circle>要素を含む

• シンプル<svg>：ここ

  は一例です

  <svg width="200" height="200"> 
      <circle cx="30" cy="30" fill="white" stroke="black" stroke-width="1" r="20" onClick="alert('clicked')"> 
      </circle> 
  </svg> 
  

• <svg>は、各ウィンドウをクリックした後、属性を変換更新

  JSコード：

  var svg = document.getElementsByTagName('svg')[0] 
  var x = 0 
  window.onclick = function() { 
      svg.setAttribute('transform', 'translate(' + x + ',' + x + ')') 
      x += 3 
  } 
  

https://jsfiddle.net/ohpaaevt/6/

誰かがこれについていくつかの光を当てることができますか？

EDIT：私はちょうど<svg>に属性を変換を適用することも、Firefoxのみで、Chromeで動作しないことに気づきました。他のブラウザではテストしていません。

Answer 1

<svg>の要素は、Firefoxのみが実装したSVG 2の新機能です。 SVG 1.1では、<svg>要素は変換属性を持つことをサポートしていません。

SVG 2は新しい仕様であり、まだ完成していません。 Chrome、Firefox、IE Edgeではさまざまな部分が実装されています。 <svg>の<g>子を作成し、<g>要素に<svg>のすべての内容を移動してからではなく<svg>要素よりも<g>要素を変換Chromeで対応無しの不足を回避するには

。