Merge pull request #759 from ArthurG94/758-fix-svg-attr-parsing

#758 Add SVG text interpretation and improve CSS extraction

build/two.js

@@ -767,7 +767,7 @@ var Two = (() => {
       canvas: "CanvasRenderer"
     },
     Version: "v0.8.16",
-    PublishDate: "2025-02-13T20:00:59.976Z",
+    PublishDate: "2025-02-13T23:13:24.615Z",
     Identifier: "two-",
     Resolution: 12,
     AutoCalculateImportedMatrices: true,
@@ -6807,7 +6807,9 @@ var Two = (() => {
       if (typeof name === "undefined" || typeof value === "undefined") {
         continue;
       }
-      styles[name] = value.replace(/\s/, "");
+      const trimmedName = name.replace(/\s/g, "");
+      const trimmedValue = value.replace(/\s/g, "");
+      styles[trimmedName] = trimmedValue;
     }
     return styles;
   }
@@ -7082,7 +7084,13 @@ var Two = (() => {
           break;
         case "font-size":
           if (elem instanceof Text) {
-            elem.size = value;
+            if (value.match("[a-z%]$") && !value.endsWith("px")) {
+              error = new TwoError(
+                "only pixel values are supported with the " + key + " attribute."
+              );
+              console.warn(error.name, error.message);
+            }
+            elem.size = parseFloat(value);
           }
           break;
         case "font-weight":
@@ -7712,7 +7720,12 @@ var Two = (() => {
     text: function(node, parentStyles) {
       const alignment = getAlignment(node.getAttribute("text-anchor")) || "left";
       const baseline = getBaseline(node) || "baseline";
-      const message = node.textContent;
+      let message = "";
+      if (node.childNodes.length > 0 && node.childNodes[0].tagName === "TSPAN") {
+        message = node.childNodes[0].textContent;
+      } else {
+        message = node.textContent;
+      }
       const text = new Text(message);
       applySvgAttributes.call(this, node, text, parentStyles);
       text.alignment = alignment;

build/two.module.js

@@ -783,7 +783,7 @@ var Constants = {
     canvas: "CanvasRenderer"
   },
   Version: "v0.8.16",
-  PublishDate: "2025-02-13T20:00:59.976Z",
+  PublishDate: "2025-02-13T23:13:24.615Z",
   Identifier: "two-",
   Resolution: 12,
   AutoCalculateImportedMatrices: true,
@@ -6827,7 +6827,9 @@ function extractCSSText(text, styles) {
     if (typeof name === "undefined" || typeof value === "undefined") {
       continue;
     }
-    styles[name] = value.replace(/\s/, "");
+    const trimmedName = name.replace(/\s/g, "");
+    const trimmedValue = value.replace(/\s/g, "");
+    styles[trimmedName] = trimmedValue;
   }
   return styles;
 }
@@ -7102,7 +7104,13 @@ function applySvgAttributes(node, elem, parentStyles) {
         break;
       case "font-size":
         if (elem instanceof Text) {
-          elem.size = value;
+          if (value.match("[a-z%]$") && !value.endsWith("px")) {
+            error = new TwoError(
+              "only pixel values are supported with the " + key + " attribute."
+            );
+            console.warn(error.name, error.message);
+          }
+          elem.size = parseFloat(value);
         }
         break;
       case "font-weight":
@@ -7732,7 +7740,12 @@ var read = {
   text: function(node, parentStyles) {
     const alignment = getAlignment(node.getAttribute("text-anchor")) || "left";
     const baseline = getBaseline(node) || "baseline";
-    const message = node.textContent;
+    let message = "";
+    if (node.childNodes.length > 0 && node.childNodes[0].tagName === "TSPAN") {
+      message = node.childNodes[0].textContent;
+    } else {
+      message = node.textContent;
+    }
     const text = new Text(message);
     applySvgAttributes.call(this, node, text, parentStyles);
     text.alignment = alignment;

src/utils/interpret-svg.js

@@ -107,9 +107,13 @@ function extractCSSText(text, styles) {
     if (typeof name === 'undefined' || typeof value === 'undefined') {
       continue;
     }
-    styles[name] = value.replace(/\s/, '');
-  }
 
+    //Delete whitespace and line breaks from name and value
+    const trimmedName = name.replace(/\s/g, '');
+    const trimmedValue = value.replace(/\s/g, '');
+
+    styles[trimmedName] = trimmedValue;
+  }
   return styles;
 }
 
@@ -487,7 +491,13 @@ function applySvgAttributes(node, elem, parentStyles) {
         break;
       case 'font-size':
         if (elem instanceof Text) {
-          elem.size = value;
+          if (value.match('[a-z%]$') && !value.endsWith('px')) {
+            error = new TwoError(
+              'only pixel values are supported with the ' + key + ' attribute.'
+            );
+            console.warn(error.name, error.message);
+          }
+          elem.size = parseFloat(value);
         }
         break;
       case 'font-weight':
@@ -1310,7 +1320,15 @@ export const read = {
   text: function (node, parentStyles) {
     const alignment = getAlignment(node.getAttribute('text-anchor')) || 'left';
     const baseline = getBaseline(node) || 'baseline';
-    const message = node.textContent;
+    let message = '';
+
+    // Detect tspan for getting text content.
+    // If not, svg indentation apears in text content
+    if (node.childNodes.length > 0 && node.childNodes[0].tagName === 'TSPAN') {
+      message = node.childNodes[0].textContent;
+    } else {
+      message = node.textContent;
+    }
 
     const text = new Text(message);