Added single quoting to font names in toSVG (fabricjs#4840)

* Added font quoting to toSVG * fixed test
thiagocunha · Mar 22, 2018 · bd11ddb · bd11ddb
1 parent 6ec2a72
commit bd11ddb
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/mixins/object.svg_export.js b/src/mixins/object.svg_export.js
@@ -63,9 +63,12 @@
      * @return {String}
      */
     getSvgSpanStyles: function(style, useWhiteSpace) {
-      var term = '; ',
-          strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '',
-          fontFamily = style.fontFamily ? 'font-family: ' + style.fontFamily.replace(/"/g, '\'') + term : '',
+      var term = '; ';
+      var fontFamily = style.fontFamily ?
+        'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ?
+          '\'' + style.fontFamily  + '\'' : style.fontFamily)) + term : '';
+      var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '',
+          fontFamily = fontFamily,
           fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '',
           fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '',
           fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '',

diff --git a/test/unit/text.js b/test/unit/text.js
@@ -616,7 +616,7 @@
       fontSize: 25,
     };
     var styleString = iText.getSvgSpanStyles(styleObject);
-    var expected = 'stroke-width: 30; font-family: Verdana; font-size: 25px; fill: rgb(255,0,0); ';
+    var expected = 'stroke-width: 30; font-family: \'Verdana\'; font-size: 25px; fill: rgb(255,0,0); ';
     assert.equal(styleString, expected, 'style is as expected');
   });
   QUnit.test('getSvgSpanStyles produces correct output with useWhiteSpace', function(assert) {
@@ -628,7 +628,7 @@
       fontSize: 25,
     };
     var styleString = iText.getSvgSpanStyles(styleObject, true);
-    var expected = 'stroke-width: 30; font-family: Verdana; font-size: 25px; fill: rgb(255,0,0); white-space: pre; ';
+    var expected = 'stroke-width: 30; font-family: \'Verdana\'; font-size: 25px; fill: rgb(255,0,0); white-space: pre; ';
     assert.equal(styleString, expected, 'style is as expected');
   });
   QUnit.test('getSvgTextDecoration with overline true produces correct output', function(assert){

diff --git a/test/unit/text_to_svg.js b/test/unit/text_to_svg.js
@@ -34,4 +34,21 @@
     assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG));
     fabric.Object.NUM_FRACTION_DIGITS = 2;
   });
+
+  QUnit.test('toSVG with font', function(assert) {
+    var TEXT_SVG_WITH_FONT = '\t<g transform="translate(50.5 26.72)">\n\t\t<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-60" y="-13.65" style="font-family: \'Times New Roman\'; ">xxxxxx</tspan><tspan x="-60" y="38.78" style="white-space: pre; ">x </tspan><tspan x=\"40\" y=\"38.78\" >y</tspan></text>\n\t</g>\n';
+    var text = new fabric.Text('xxxxxx\nx y', {
+      textAlign: 'justify',
+      styles: {0: {
+        0: {fontFamily: 'Times New Roman'},
+        1: {fontFamily: 'Times New Roman'},
+        2: {fontFamily: 'Times New Roman'},
+        3: {fontFamily: 'Times New Roman'},
+        4: {fontFamily: 'Times New Roman'},
+        5: {fontFamily: 'Times New Roman'}
+      }}
+    });
+
+    assert.equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_WITH_FONT));
+  });
 })();