diff --git a/src/mixins/object.svg_export.js b/src/mixins/object.svg_export.js index eb61fac8c87..973e2badedb 100644 --- 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 index 4c95b4daef3..70e22ad04fc 100644 --- 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 index 2efd2e837f9..cdf1e08b87f 100644 --- 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\n\t\txxxxxxx y\n\t\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)); + }); })();