SVG elements lose event listeners after transform

Question

When the parent <svg> transform attribute is programmatically changed, I got some weird behaviours of inner SVG elements. Neither css selectors (like :hover) nor javascript listeners (onClick) are working after the change.

Here is an example:

• A simple <svg> containing a <circle> element:

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

• JS code that updates <svg> transform attribute after each window click:

  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/

Could anybody shed some light on this ?

EDIT : I just noticed that applying transform attribute on <svg> doesn't even work on Chrome, only on Firefox. Haven't tested with other browsers.

Answer 1

Transforms on <svg> elements are a new feature of SVG 2 that only Firefox has implemented. In SVG 1.1 the <svg> element does not support having a transform attribute.

SVG 2 is a new specification and is as yet unfinished. Chrome, Firefox and IE Edge have implemented different parts of it.

To work around the lack of suport in Chrome create a <g> child of the <svg> and move all the contents of the <svg> into the <g> element and then transform the <g> element rather than the <svg> element.