Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

include compound CSS selectors and those that don't mention the <svg> element #23

Open
wants to merge 7 commits into
base: gh-pages
Choose a base branch
from
Open

include compound CSS selectors and those that don't mention the <svg> element #23

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
39b7850
include @font-face CSS rules
sweetleon Jan 10, 2015
917c06a
make nested CSS rules match SVG elements
sweetleon Jan 10, 2015
bd7144e
handle compound CSS selectors
sweetleon Jan 14, 2015
fcb7e2b
handle CSS selectors that don't include `svg`
sweetleon Jan 14, 2015
799fe49
inlined/cached images don't trigger .onload
sweetleon Jan 15, 2015
97c9d6d
catch error when rule.selectorText confuses element.querySelectorAll
sweetleon Jan 16, 2015
ad358d1
image.setAttribute('href', ...) works but 'xlink:href' doesn't
sweetleon Jan 16, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 51 additions & 12 deletions saveSvgAsPng.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,28 +27,55 @@
var img = new Image();
href = href || image.getAttribute('href');
img.src = href;
img.onload = function() {
var loadHandler = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
image.setAttribute('xlink:href', canvas.toDataURL('image/png'));
left--;
if (left == 0) {
callback();
}
}
img.onerror = function() {
console.log("Could not load "+href);
image.setAttribute('href', canvas.toDataURL('image/png'));
left--;
if (left == 0) {
callback();
}
};
if (img.complete) {
loadHandler();
} else {
img.onload = loadHandler;
img.onerror = function() {
console.log("Could not load " + href);
left--;
if (left == 0) {
callback();
}
};
}
})(images[i]);
}
}

function makeSelectorPrefixRemover(el) {
return function(selectorText) {
return selectorText.split(/\s*,\s*/).map(function(subSelectorText) {
var selectorTokens = subSelectorText.split(/\s+/);
var selectorPrefixToRemove = '';
for (var iToken = 0; iToken < selectorTokens.length; iToken++) {
selectorPrefixToRemove += ' ' + selectorTokens[iToken];

var matchingSvgElements = el.querySelectorAll(selectorPrefixToRemove);
if (matchingSvgElements.length) {
var position = iToken;
if (Array.prototype.indexOf.call(matchingSvgElements, el) >= 0) position++;
else position--;
return selectorTokens.slice(position).join(' ');
}
}
}).join(", ");
}
}

function styles(el, selectorRemap) {
selectorRemap = selectorRemap || makeSelectorPrefixRemover(el);

var css = "";
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
Expand All @@ -61,10 +88,17 @@
for (var j = 0; j < rules.length; j++) {
var rule = rules[j];
if (typeof(rule.style) != "undefined") {
var matches = el.querySelectorAll(rule.selectorText);
var matches = [];
try {
matches = el.querySelectorAll(rule.selectorText);
} catch (err) {
console.error(rule.selectorText, err);
}
if (matches.length > 0) {
var selector = selectorRemap ? selectorRemap(rule.selectorText) : rule.selectorText;
var selector = selectorRemap(rule.selectorText);
css += selector + " { " + rule.style.cssText + " }\n";
} else if (rule.cssText.match(/^@font-face/)) {
css += rule.cssText + "\n";
}
}
}
Expand Down Expand Up @@ -122,7 +156,7 @@
out$.svgAsDataUri(el, options, function(uri) {
var image = new Image();
image.src = uri;
image.onload = function() {
var loadHandler = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
Expand All @@ -134,6 +168,11 @@
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
};
if (image.complete) {
loadHandler();
} else {
image.onload = loadHandler;
}
});
}
Expand Down