Comment remplacer une méthode native HTMLElement globalement?

Question

J'essaie d'enrouler une fonction qui est implémentée pour tous les SVGElements appelé getScreenCTM.

Mon objectif est que toutes les invocations de cette méthode pour tous les éléments svg invoquent ma fonction wrapper qui imprime quelque chose et délègue ensuite à l'implémentation native originale.

Voici ce que j'ai essayé:

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

et

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(); 

mais quand la dernière ligne est exécutée, rien est imprimé. Le getScreenCTM d'origine est appelé à la place de mon implémentation wrapper.

Vous pouvez jouer avec ici: https://jsfiddle.net/zwxr2c9k/1/

Comment puis-je y arriver?

Answer 1

Vous étendons probablement l'élément mauvais, on dirait que vous avez un 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>

Notez également que vous ne pouvez pas appeler window.nativeGetScreenCTM, car elle nécessite la valeur this à être un élément SVG réel.
Vous pouvez cependant l'appeler avec apply ou call