如何全局覆盖HTMLElement本机方法？

Question

I am trying to wrap a function that is implemented for all SVGElements called getScreenCTM .

My goal is that all invocations of this method for all svg elements will invoke my wrapper function that will print something and then delegate to the original, native implementation.

Here is what I tried:

<svg id="a"></svg>

and

window.nativeGetScreenCTM = SVGElement.prototype.getScreenCTM;

SVGElement.prototype.getScreenCTM = function() {
  var matrix = window.nativeGetScreenCTM();
  console.log('printing something:');
  return matrix;
};

var svgElem = document.getElementById('a');

svgElem.getScreenCTM();

but when the last line is executed, nothing is printed. The original getScreenCTM is invoked instead of my wrapper implementation.

You can play with it here: https://jsfiddle.net/zwxr2c9k/1/

How can I accomplish this?

Answer 1

You're probably extending the wrong element, looks like you have a SVGGraphicsElement

 window.nativeGetScreenCTM = SVGGraphicsElement.prototype.getScreenCTM; SVGGraphicsElement.prototype.getScreenCTM = function() { var matrix = window.nativeGetScreenCTM.apply(this, arguments); console.log('printing something:'); return matrix; }; var svgElem = document.getElementById('a'); svgElem.getScreenCTM(); 

 <svg id="a"></svg> 

Also note that you can't just call window.nativeGetScreenCTM , as it requires the this value to be an actual SVG element.
You can however call it with apply or call