Skip to content

Commit

Permalink
feat: add support for svgs with "ex", "ch", "cm", "mm", "q", "in", "p…
Browse files Browse the repository at this point in the history
…c", "pt" dimensions
  • Loading branch information
Ghustavh97 committed Jul 14, 2021
1 parent fbd2431 commit 6c5bca1
Show file tree
Hide file tree
Showing 11 changed files with 84 additions and 9 deletions.
53 changes: 44 additions & 9 deletions src/svg.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,17 +96,52 @@ Svg.prototype = {
input
);
}
var units = ["rem", "px", "em"];

function round(input) {
return Math.round(( input + Number.EPSILON) * 100) / 100;
}

var units = ["rem", "px", "em", "ex", "ch", "cm", "mm", "q", "in", "pc", "pt"];
var convert = false;
for (var i = 0; i < units.length; i++) {
var unit = units[i];
if (input.search(unit) !== -1) {
convert = typeof input == "string" && input.search(unit) !== -1;
if (convert) {
input = input.replace(unit, "");
if (unit === "px") {
break;
} else if (unit === "em" || unit === "rem") {
input = input * 16;
break;
}
const cm = 96 / 2.54
const inch = 2.54 * cm;
switch(unit.toLowerCase()) {
case "px":
break;
case "em":
case "rem":
input = input * 16; // we can get away with this because we use jsdom.
break;
case "ex":
input = round(input * 7.156);
break;
case "ch":
input = input * 8;
break;
case "cm":
input = input * cm;
break;
case "mm":
input = round(input * (1 / 10 * cm));
break;
case "q":
input = input * (1 / 40 * cm);
break;
case "in":
input = input * inch;
break;
case "pc":
input = input * (1 / 6 * inch);
break;
case "pt":
input = input * (1 / 72 * inch);
break;
}
}
}
var dimension = Number(input);
Expand Down Expand Up @@ -146,7 +181,7 @@ Svg.prototype = {
if (svg.hasAttribute(dn[0]) && svg.hasAttribute(dn[1])) {
var width = svg.getAttribute(dn[0]);
var height = svg.getAttribute(dn[1]);
if (!width.includes("%") && !height.includes("%")) {
if (!width.includes("%") && !width.includes("vw") && !height.includes("%") && !height.includes("vh")) {
for (var i = 0; i < dn.length; i++) {
var name = dn[i];
switch (name) {
Expand Down
3 changes: 3 additions & 0 deletions test/assets/svgs/with-ch-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/assets/svgs/with-cm-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/assets/svgs/with-ex-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/assets/svgs/with-in-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/assets/svgs/with-mm-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/assets/svgs/with-pc-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/assets/svgs/with-pt-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/assets/svgs/with-q-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/assets/svgs/with-vh-vw-dimensions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 6c5bca1

Please sign in to comment.