Check support for CSS transform on SVGs

readme.md

Check support for CSS transform on SVGs

Found here: http://eprev.org/2017/01/05/how-to-detect-if-css-transforms-are-supported-on-svg/

Added zIndex to make sure SVG element is on top.

script.js

const supportsCSSTransformsOnSVG = (() => {
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('viewBox', '0 0 2 2');
  Object.assign(svg.style, {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '2px',
    height: '2px',
    zIndex: 2147483647,
  });
  svg.innerHTML = '<rect width="1" height="1" style="transform: translate(1px, 1px)"/>';
  document.body.appendChild(svg);
  const result = document.elementFromPoint(1, 1) !== svg;
  svg.parentNode.removeChild(svg);
  return result;
})();

use.js

// use like this
if (supportsCSSTransformsOnSVG) {
  el.style.transform = `translate(${dx}px, ${dy}px)`;
} else {
  el.setAttribute('transform', `translate(${dx} ${dy})`);
}