Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-03-16 22:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

various small svg fixes (#5424)

Browse source 
* various small svg fixes

* no debugger

* fontsize parsing fix - again

* added a visual test

* use min 9px

* added comment
This commit is contained in:
Andrea Bogazzi 2018-12-09 23:13:27 +01:00 committed by GitHub
parent c2ca903ffb
commit aadfea00fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/elements_parser.js
View file

@ -48,7 +48,7 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
var _options;
_this.resolveGradient(obj, 'fill');
_this.resolveGradient(obj, 'stroke');
if (obj instanceof fabric.Image) {
if (obj instanceof fabric.Image && obj._originalElement) {
_options = obj.parsePreserveAspectRatioAttribute(el);
}
obj._removeTransformMatrix(_options);

16
src/parser.js
View file

@ -85,9 +85,7 @@
value = null;
}
else {
value = value.replace(/,/g, ' ').split(/\s+/).map(function(n) {
return parseFloat(n);
});
value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat);
}
}
else if (attr === 'transformMatrix') {
@ -130,6 +128,9 @@
value = 'stroke';
}
}
else if (attr === 'href' || attr === 'xlink:href') {
return value;
}
else {
parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);
}
@ -821,7 +822,7 @@
var value,
parentAttributes = { },
fontSize;
fontSize, parentFontSize;
if (typeof svgUid === 'undefined') {
svgUid = element.getAttribute('svgUid');
@ -843,8 +844,11 @@
ownAttributes = extend(ownAttributes,
extend(getGlobalStylesForElement(element, svgUid), fabric.parseStyleAttribute(element)));
fontSize = (parentAttributes && parentAttributes.fontSize ) ||
ownAttributes['font-size'] || fabric.Text.DEFAULT_SVG_FONT_SIZE;
fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE;
if (ownAttributes['font-size']) {
// looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers.
ownAttributes['font-size'] = fontSize = parseUnit(ownAttributes['font-size'], parentFontSize);
}
var normalizedAttr, normalizedValue, normalizedStyle = {};
for (var attr in ownAttributes) {

8
src/shapes/path.class.js
View file

@ -471,15 +471,13 @@
* of the instance
*/
_toSVG: function() {
var specificTransform = this._getOffsetTransform(),
path = this.path.map(function(path) {
return path.join(' ');
}).join(' ');
var path = this.path.map(function(path) {
return path.join(' ');
}).join(' ');
return [
'<path ', 'COMMON_PARTS',
'd="', path,
'" stroke-linecap="round" ',
'transform="' + specificTransform + '" ',
'/>\n'
];
},

6
src/static_canvas.class.js
View file

@ -390,6 +390,7 @@
* crossOrigin: 'anonymous'
* });
*/
// TODO: fix stretched examples
setBackgroundImage: function (image, callback, options) {
return this.__setBgOverlayImage('backgroundImage', image, callback, options);
},
@ -1293,12 +1294,11 @@
this._setSVGPreamble(markup, options);
this._setSVGHeader(markup, options);
this._setSVGBgOverlayColor(markup, 'backgroundColor');
this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);
if (this.clipPath) {
markup.push('<g clip-path="url(#' + this.clipPath.clipPathId + ')" >\n');
}
this._setSVGBgOverlayColor(markup, 'backgroundColor');
this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver);
this._setSVGObjects(markup, reviver);
if (this.clipPath) {
markup.push('</g>\n');

6
test/unit/path.js
View file

@ -129,7 +129,7 @@
var done = assert.async();
makePathObject(function(path) {
assert.ok(typeof path.toSVG === 'function');
assert.deepEqual(path.toSVG(), '<g transform=\"matrix(1 0 0 1 200.5 200.5)\" >\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</g>\n');
assert.deepEqual(path.toSVG(), '<g transform=\"matrix(1 0 0 1 200.5 200.5)\" >\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</g>\n');
done();
});
});
@ -139,7 +139,7 @@
makePathObject(function(path) {
makePathObject(function(path2) {
path.clipPath = path2;
assert.deepEqual(path.toSVG(), '<g transform=\"matrix(1 0 0 1 200.5 200.5)\" clip-path=\"url(#CLIPPATH_0)\" >\n<clipPath id=\"CLIPPATH_0\" >\n\t<path transform=\"matrix(1 0 0 1 200.5 200.5) translate(-200, -200)\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</clipPath>\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</g>\n', 'path clipPath toSVG should match');
assert.deepEqual(path.toSVG(), '<g transform=\"matrix(1 0 0 1 200.5 200.5)\" clip-path=\"url(#CLIPPATH_0)\" >\n<clipPath id=\"CLIPPATH_0\" >\n\t<path transform=\"matrix(1 0 0 1 200.5 200.5) translate(-200, -200)\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</clipPath>\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</g>\n', 'path clipPath toSVG should match');
done();
});
});
@ -152,7 +152,7 @@
makePathObject(function(path2) {
path.clipPath = path2;
path.clipPath.absolutePositioned = true;
assert.deepEqual(path.toSVG(), '<g clip-path=\"url(#CLIPPATH_0)\" >\n<g transform=\"matrix(1 0 0 1 200.5 200.5)\" >\n<clipPath id=\"CLIPPATH_0\" >\n\t<path transform=\"matrix(1 0 0 1 200.5 200.5) translate(-200, -200)\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</clipPath>\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" transform=\" translate(-200, -200)\" />\n</g>\n</g>\n', 'path clipPath toSVG absolute should match');
assert.deepEqual(path.toSVG(), '<g clip-path=\"url(#CLIPPATH_0)\" >\n<g transform=\"matrix(1 0 0 1 200.5 200.5)\" >\n<clipPath id=\"CLIPPATH_0\" >\n\t<path transform=\"matrix(1 0 0 1 200.5 200.5) translate(-200, -200)\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</clipPath>\n<path style=\"stroke: rgb(0,0,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;\" d=\"M 100 100 L 300 100 L 200 300 z\" stroke-linecap=\"round\" />\n</g>\n</g>\n', 'path clipPath toSVG absolute should match');
done();
});
});

6
test/visual/assets/svg_text_letterspacing.svg Normal file
View file

@ -0,0 +1,6 @@
<svg height="200" width="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="30" style="font-size: 20px; letter-spacing: 20px">Letter-spacing in 'px'</text>
<text x="0" y="70" style="font-size: 20px; letter-spacing: 0.5em">Letter-spacing in 'em'</text>
<text x="0" y="100" style="font-size: 0.6em; letter-spacing: 0.5em">Letter-spacing in 'em' font-size in 'em'</text>
<text x="0" y="140" style="letter-spacing: 0.5em">Letter-spacing in 'em' no font-size</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 487 B

BIN
test/visual/golden/svg_text_letterspacing.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

1
test/visual/svg_import.js
View file

@ -72,6 +72,7 @@
'svg_radial_11',
'svg_radial_12',
'svg_radial_13',
'svg_text_letterspacing',
].map(createTestFromSVG);
tests.forEach(visualTestLoop(fabricCanvas, QUnit));