From 6c5bca16e8a123ec3d9b821ffed8138e56630778 Mon Sep 17 00:00:00 2001 From: Ghustavh Ehm Date: Wed, 14 Jul 2021 15:34:59 +0200 Subject: [PATCH] feat: add support for svgs with "ex", "ch", "cm", "mm", "q", "in", "pc", "pt" dimensions --- src/svg.js | 53 ++++++++++++++++++---- test/assets/svgs/with-ch-dimensions.svg | 3 ++ test/assets/svgs/with-cm-dimensions.svg | 3 ++ test/assets/svgs/with-ex-dimensions.svg | 3 ++ test/assets/svgs/with-in-dimensions.svg | 3 ++ test/assets/svgs/with-mm-dimensions.svg | 3 ++ test/assets/svgs/with-pc-dimensions.svg | 3 ++ test/assets/svgs/with-pt-dimensions.svg | 3 ++ test/assets/svgs/with-q-dimensions.svg | 3 ++ test/assets/svgs/with-vh-vw-dimensions.svg | 3 ++ test/src/test.svg.js | 13 ++++++ 11 files changed, 84 insertions(+), 9 deletions(-) create mode 100755 test/assets/svgs/with-ch-dimensions.svg create mode 100755 test/assets/svgs/with-cm-dimensions.svg create mode 100755 test/assets/svgs/with-ex-dimensions.svg create mode 100755 test/assets/svgs/with-in-dimensions.svg create mode 100755 test/assets/svgs/with-mm-dimensions.svg create mode 100755 test/assets/svgs/with-pc-dimensions.svg create mode 100755 test/assets/svgs/with-pt-dimensions.svg create mode 100755 test/assets/svgs/with-q-dimensions.svg create mode 100755 test/assets/svgs/with-vh-vw-dimensions.svg diff --git a/src/svg.js b/src/svg.js index 162cc31..98df27a 100755 --- a/src/svg.js +++ b/src/svg.js @@ -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); @@ -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) { diff --git a/test/assets/svgs/with-ch-dimensions.svg b/test/assets/svgs/with-ch-dimensions.svg new file mode 100755 index 0000000..2f3977c --- /dev/null +++ b/test/assets/svgs/with-ch-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/assets/svgs/with-cm-dimensions.svg b/test/assets/svgs/with-cm-dimensions.svg new file mode 100755 index 0000000..0e9df21 --- /dev/null +++ b/test/assets/svgs/with-cm-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/assets/svgs/with-ex-dimensions.svg b/test/assets/svgs/with-ex-dimensions.svg new file mode 100755 index 0000000..a207ce4 --- /dev/null +++ b/test/assets/svgs/with-ex-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/assets/svgs/with-in-dimensions.svg b/test/assets/svgs/with-in-dimensions.svg new file mode 100755 index 0000000..f9ddc32 --- /dev/null +++ b/test/assets/svgs/with-in-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/assets/svgs/with-mm-dimensions.svg b/test/assets/svgs/with-mm-dimensions.svg new file mode 100755 index 0000000..25958de --- /dev/null +++ b/test/assets/svgs/with-mm-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/assets/svgs/with-pc-dimensions.svg b/test/assets/svgs/with-pc-dimensions.svg new file mode 100755 index 0000000..49bb592 --- /dev/null +++ b/test/assets/svgs/with-pc-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/assets/svgs/with-pt-dimensions.svg b/test/assets/svgs/with-pt-dimensions.svg new file mode 100755 index 0000000..5012347 --- /dev/null +++ b/test/assets/svgs/with-pt-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/assets/svgs/with-q-dimensions.svg b/test/assets/svgs/with-q-dimensions.svg new file mode 100755 index 0000000..31a9e65 --- /dev/null +++ b/test/assets/svgs/with-q-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/assets/svgs/with-vh-vw-dimensions.svg b/test/assets/svgs/with-vh-vw-dimensions.svg new file mode 100755 index 0000000..0e9df21 --- /dev/null +++ b/test/assets/svgs/with-vh-vw-dimensions.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/src/test.svg.js b/test/src/test.svg.js index ceb4e40..aaa8176 100755 --- a/test/src/test.svg.js +++ b/test/src/test.svg.js @@ -234,6 +234,10 @@ describe("svg.js", () => { name: "with-px-dimensions.svg", dimensions: { width: 96, height: 96 }, }, + { + name: "with-vh-vw-dimensions.svg", + dimensions: { width: 24, height: 24 }, + }, { name: "with-viewbox-only.svg", dimensions: { width: 24, height: 24 }, @@ -251,6 +255,14 @@ describe("svg.js", () => { dimensions: { width: 24, height: 24 }, }, ]; + + ['ch', 'cm', 'ex', 'in', 'mm', 'pc', 'pt', 'q'].forEach(function(d) { + svgs.push({ + name: `with-${d}-dimensions.svg`, + dimensions: { width: 24, height: 24 } + }); + }); + svgs.forEach((svg) => { var name = svg.name; it(`can get dimensions for ${name}`, () => { @@ -464,6 +476,7 @@ describe("svg.js", () => { describe("- arguments", () => { describe("[input]", () => { var data = [ + "number", "valid-svg-dimension-string-number", "valid-svg-dimension-px", "valid-svg-dimension-em",