Created
April 9, 2015 13:19
-
-
Save nathan/9edfa8e8934cbdc906e2 to your computer and use it in GitHub Desktop.
Phosphorus SVG namespace fixer.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git a/phosphorus.js b/phosphorus.js | |
index 532f392..9198e0c 100644 | |
--- a/phosphorus.js | |
+++ b/phosphorus.js | |
@@ -466,7 +466,18 @@ var P = (function() { | |
}; | |
IO.fixSVG = function(svg, element) { | |
- if (element.nodeType !== 1) return; | |
+ var name = element.nodeName.match(/^svg:(.*)/i); | |
+ if (name) { | |
+ var newElement = document.createElement(name[1]); | |
+ for (var i = 0; i < element.attributes.length; i++) { | |
+ newElement.attributes.setNamedItem(element.attributes[i].cloneNode()); | |
+ } | |
+ while (element.firstChild) { | |
+ newElement.appendChild(element.firstChild); | |
+ } | |
+ element = newElement; | |
+ } | |
+ if (element.nodeType !== 1) return element; | |
if (element.nodeName === 'text') { | |
var font = element.getAttribute('font-family') || ''; | |
font = IO.FONTS[font] || font; | |
@@ -501,7 +512,10 @@ var P = (function() { | |
element.setAttribute('x', 0); | |
element.setAttribute('y', 0); | |
} | |
- [].forEach.call(element.childNodes, IO.fixSVG.bind(null, svg)); | |
+ for (var i = 0; i < element.childNodes.length; i++) { | |
+ element.replaceChild(IO.fixSVG(svg, element.childNodes[i]), element.childNodes[i]); | |
+ } | |
+ return element; | |
}; | |
IO.loadMD5 = function(md5, id, callback, isAudio) { | |
@@ -512,34 +526,34 @@ var P = (function() { | |
var ext = md5.split('.').pop(); | |
if (ext === 'svg') { | |
var cb = function(source) { | |
- var div = document.createElement('div'); | |
- div.innerHTML = source; | |
- var svg = div.getElementsByTagName('svg')[0]; | |
+ var svg = new DOMParser().parseFromString(source, 'text/xml').children[0]; | |
svg.style.visibility = 'hidden'; | |
svg.style.position = 'absolute'; | |
svg.style.left = '-10000px'; | |
svg.style.top = '-10000px'; | |
document.body.appendChild(svg); | |
- var viewBox = svg.viewBox.baseVal; | |
+ var fixedSvg = IO.fixSVG(svg, svg); | |
+ var div = document.createElement('div'); | |
+ div.innerHTML = fixedSvg.outerHTML; | |
+ fixedSvg = div.children[0]; | |
+ document.body.appendChild(fixedSvg); | |
+ var viewBox = fixedSvg.viewBox.baseVal; | |
if (viewBox && (viewBox.x || viewBox.y)) { | |
- svg.width.baseVal.value = viewBox.width - viewBox.x; | |
- svg.height.baseVal.value = viewBox.height - viewBox.y; | |
+ fixedSvg.width.baseVal.value = viewBox.width - viewBox.x; | |
+ fixedSvg.height.baseVal.value = viewBox.height - viewBox.y; | |
viewBox.x = 0; | |
viewBox.y = 0; | |
viewBox.width = 0; | |
viewBox.height = 0; | |
} | |
- IO.fixSVG(svg, svg); | |
- while (div.firstChild) div.removeChild(div.lastChild); | |
- div.appendChild(svg); | |
- svg.style.visibility = 'visible'; | |
+ fixedSvg.style.visibility = 'visible'; | |
var canvas = document.createElement('canvas'); | |
var image = new Image; | |
callback(image); | |
// svg.style.cssText = ''; | |
// console.log(md5, 'data:image/svg+xml;base64,' + btoa(div.innerHTML.trim())); | |
- canvg(canvas, div.innerHTML.trim(), { | |
+ canvg(canvas, fixedSvg.outerHTML.trim(), { | |
ignoreMouse: true, | |
ignoreAnimation: true, | |
ignoreClear: true, | |
@@ -547,6 +561,8 @@ var P = (function() { | |
image.src = canvas.toDataURL(); | |
} | |
}); | |
+ document.body.removeChild(svg); | |
+ document.body.removeChild(fixedSvg); | |
}; | |
if (IO.zip) { | |
cb(f.asText()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment