Use createElementNS to allow running in an SVG document

Fixes #12

Author: dstoc

src/animation-constructor.js

@@ -51,7 +51,7 @@
     return scope.timeline.play(new scope.Animation(this, effect, timing));
   };
 
-  var nullTarget = document.createElement('div');
+  var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
   scope.newUnderlyingPlayerForAnimation = function(animation) {
     var target = animation.target || nullTarget;
     var effect = animation._effect;

src/apply-preserving-inline-style.js

@@ -47,8 +47,7 @@
     // Stores the inline style of the element on its behalf while the
     // polyfill uses the element's inline style to simulate web animations.
     // This is needed to fake regular inline style CSSOM access on the element.
-    this._surrogateElement = document.createElement('div');
-    this._surrogateStyle = this._surrogateElement.style;
+    this._surrogateStyle = document.createElementNS('http://www.w3.org/1999/xhtml', 'div').style;
     this._style = element.style;
     this._length = 0;
     this._isAnimatedProperty = {};

src/color-handler.js

@@ -14,7 +14,7 @@
 
 (function(scope, testing) {
 
-  var canvas = document.createElement('canvas');
+  var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
   canvas.width = canvas.height = 1;
   var context = canvas.getContext('2d');
 

src/effect-callback.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 (function(shared, scope, testing) {
 
-  var nullTarget = document.createElement('div');
+  var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
 
   var sequenceNumber = 0;
   scope.bindPlayerForCustomEffect = function(player) {

src/normalize-keyframes.js

@@ -108,7 +108,7 @@
     ]
   };
 
-  var shorthandExpanderElem = document.createElement('div');
+  var shorthandExpanderElem = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
 
   var borderWidthAliases = {
     thin: '1px',