Sharepoint 2010 Javascript Conflict with SVG Element Mouse Down event

I was working on a project with SVG element inside SharePoint 2010 Application Page, the Issue happened when i was trying to handle ‘onmousedown’ events for a DIV element containing this SVG.

SharePoint throw this Webpage JavaScript error:

Object doesn't support property or method 'split' ..

Here is the story … the issue come inside ScriptResource.axd only in IE9 and IE9 in the last line at this function.

Sys.UI.DomElement.containsCssClass = function Sys$UI$DomElement$containsCssClass(element, className) {
    ///summary locid="M:J#Sys.UI.DomElement.containsCssClass";
    /// param name="element" domElement="true";/param;
    /// param name="className" type="String";/param;
    /// returns type="Boolean";/returns;
  var e = Function._validateParams(arguments, 
  [{name: "element", domElement: true},
   {name: "className", type: String}]);
    if (e) throw e;
    return Array.contains(element.className.split(' '), className);
}

after tracking the Issue i found that the root cause comes from a call from inside SP.Ribbon.debug.js validation function. i won’t illustrate more about this as it didn’t help me any more to fix this issue. all i believe from this that SharePoint 2010 JavaScript APIs not yet well familiar with these HTML5 tags that doesn’t have a String Classname property where it it search on on Classname attribute and operate with this attribute as a string.

the point is that SVGElement is already has a Classname attribute, but it is not a string anymore, it is an Array or 2 items, animVal & baseVal and both are strings.

So, when the function tried to split an array of strings it throw error where there is no implementation for a Split function in the Array Prototype.

and here is the solution, actually it wasn’t a solution as an workaround but it works for me.

simply, if the browser tries to apply Split function on array, and no split function found, i implemented a Useless Split function for the Array Prototype returns empty Array. and that indeed won’t affect any of the functionality workflow and that what i am sure about.

in the Document.Ready and before any thing , i check on the browser mode and implemented he Split function. here is the code.

jQuery(document).ready(function () {
if (document.documentMode && document.documentMode = 9) 
{
SVGAnimatedString.prototype.split = function (value)
{ 
return new Array(); 
};
}
});

and that solved the issue.