-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Export text on path to SVG #6958
Comments
The only implementation of svg textpath that works across firefox and chrome is the hardest one to replicate. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Okay, I have made some progress on this one, while it works, there are some things I am having trouble getting right. My guess was that for fabric.Text we would not need tspan element in the SVG export. After getting rid of those, it was a simple solution. I am still not sure about the side effects of the following approach. fabric.Text.prototype.toSVG = function (reviver) {
if (this.type === 'text') {
var noShadow = true,
textDecoration = this.getSvgTextDecoration(this);
var pathString = '';
this.path?.path.forEach(p => {
pathString += p.join(' ');
pathString += ', ';
});
return this._createBaseSVGMarkup(
this.path?.path ?
[
'<defs>',
'<path id="textOnPathId" fill="none" stroke="none" d="',
pathString,
'" />',
'</defs>',
'\t\t<text xml:space="preserve" ',
(this.fontFamily ? 'font-family="' + this.fontFamily.replace(/"/g, '\'') + '" ' : ''),
(this.fontSize ? 'font-size="' + this.fontSize + '" ' : ''),
(this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''),
(this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''),
(textDecoration ? 'text-decoration="' + textDecoration + '" ' : ''),
'style="', this.getSvgStyles(noShadow), '"', this.addPaintOrder(), ' >',
'<textPath side="',
this.pathSide,
'" href="#textOnPathId">',
this.text,
'</textPath>',
'</text>\n'
]
:
[
'\t\t<text xml:space="preserve" ',
(this.fontFamily ? 'font-family="' + this.fontFamily.replace(/"/g, '\'') + '" ' : ''),
(this.fontSize ? 'font-size="' + this.fontSize + '" ' : ''),
(this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''),
(this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''),
(textDecoration ? 'text-decoration="' + textDecoration + '" ' : ''),
'style="', this.getSvgStyles(noShadow), '"', this.addPaintOrder(), ' >',
this.text,
'</text>\n'
],
{ reviver: reviver, noStyle: true, withShadow: true }
);
} else {
return this._createBaseSVGMarkup(
this._toSVG(),
{ reviver: reviver, noStyle: true, withShadow: true }
);
}
}; |
great! Also there is a common part of text code that we can reuse, right? If you manage to get a single color, single path example working, open a PR. I m sure for styles and tSpan will be more complicated |
facing same issue here you can check using developer tool console with below command - Please add text and then run in console canvas.loadFromJSON(canvas.toJSON(['p1', 'p0', 'p2', 'line','canvas'])) This command should add same components again |
Hello! |
https://jsfiddle.net/3btoymjd/ Does this help? Used hoomanaskari's approach and some transformations. Need to think of a bounding rect or something to make it generalise |
Added more parameters.
|
Based on hoomanaskari's and mudassirali007's approaches - You might also add a function to reverse path direction. This way we get a workaround for the unsupported "side" attribute (at least in chromium).
See codepen example |
@herrstrietzel pretty good! but I don't know why if I change the path the svg is weird (not at the good place). For example with this : M 75 0 A 10 10 0 0 1 75 -150 A 1 1 0 0 1 75 0 Z |
@Clemweb have you found a solution to this? facing the same problem, any different path get's posicioned wrong on the export |
@herrstrietzel, @Clemweb: sorry for the late response. |
Hello, an export a text on path to SVG is not working.
Test case:
https://jsfiddle.net/meugen22/ojatr2cL/5/
The text was updated successfully, but these errors were encountered: