TSPAN SUPPORT #1280
Comments
|
Ok, so I fixed few things. "visibility: hidden" should now be working. Text is now positioned slightly better, but not exactly correct yet. We need to add support for "text-anchor" which isn't straightforward. I'll be looking into it more. |
|
Hi, I write this code to start to manage tspan position x/y : |
|
I closed #820 but we should just not forget to account for rotate attribute on tspans |
|
Hi guys, |
|
can t you just use json for exporting and reimporting? svg is not meant for that |
|
Wondering about this issue - any possible workarounds related to how the .SVG is initially constructed/saved? Great library thanks |
|
Hello, @asturur you are suggesting to use json for exporting and importing, but what if we need to create an export pdf file ? I am using both exporting formats: 1. SVG - for PDF export 2. JSON for later import in canvas. But now I have encountered an issue with updating text in SVG. For text objects I am using texbox as I need text-wrapping. The thing is that after export in SVG each letter is kept in separate tspan with its own styling. But later when I want to update that text (for example some tranbsaltion key ahs been added to canvas and before export to pdf I want to change that key with real translated value) I don't know what styling to apply to tspans. So my question mainly is how fabirc is calculating styling for tspans position, etc. Or is there other way to update text in exported svg without loosing styling and avoiding tspans styling calculation ? Thanks in advance |
|
there is not. Svg is pretty much an image with POOR text support. you could make a trick, modify the svg export, add an attribute to text object with a json stringfy of the style object, and make some custom code when reimport it. not something i want to support. i want to do proper TSPAN support but i did not start yet |
|
Maybe i understood bad. what styling are you talking about? color, font, size? |
|
@asturur first of all thanks for your very quick response. My main problem is that pdf export is done via cron job, when editor is closed. So I can't export svg directly from canvas. I am taking svg from DB and tryng to translate it before export. So now about stylings mentioned in above comment: I am talking about the style of each tspan element. When we export canvas to svg each letter of canvas text object is kept in separate "" tag that keeps some styling which I guess is responsible for letter position, alignment, font, etc. So for translating SVG I need to replace '#' to 'Hello' which means that above tspan(s) list should be changed to new tspan list containing letters for 'Hello' (Means that 1 tspan should be replaced with 5 tspans). Well for 1st tspans can be kept the same x, y, style (but maybe even this can not be kept, as if I have translated 2nd letter bigger/smaller than trasnaltion key letter than might be that x coordinate should be changed as well), but what about other new tspans. The problem is that I don't know what x, y, style to apply for each letter of "Hello". I guess as for styling I can take translation keys last letter style for all other newer elements, but what about x, y position. This is my main problem. So the question can be rephrased so how x, y attribute values are calculated for each tspan based on letter that it contains. Or in general how a text can be changed with other text in SVG without loosing any information about its styling. Actually I was doing translation of SVG without taking into account tspan at all. Just each text ndoeValue was changed $text->nodeValue = $translatedText (Please refer to below translateTemplateSVG ). BUt then I realised that with this approach text alignments are lost (left, right, center), so I came to an idea that tspans should be kept to have everything working as they supposed to. Looking forward to hear from you soon. |
|
Any updated with this? |
|
No, no one worked on it. |
|
Any updates with this?? |
|
no zero, zero. |
|
@asturur Something new nowadays or any alternatives? |
|
No, not at all. I ll probably get it done after i made curved text better and after i improved the masks pr |
|
Hi @asturur, is it fixable. any workaround ? |
|
@asturur any update regarding ### TSpan working in SVG? |
|
no one right now has time to work on this |
|
@asturur is there a solution? |
|
I just added a bounty of 200$ on this open bug. Maybe others can join as well, as there seem to be multiple people interested in a fix. https://app.bountysource.com/issues/1676489-tspan-support I created the following smaller testcase, with some texts of different sizes and guidelines, which makes it easy to check the results. It was created with Inkscape and optimized for better readability with svgo
|
|
@bluegaspode Maybe something like this? I just did it quickly and didnt really flush out everything.. but just wanted to see. |
|
For the given example it works already, thats cool! I have a second example, with just 4 aligned text-blocks, where it doesn't work though :( target image should look like this (you can check with a browser or Inkscape)
with the given jsfiddle looks like this: Once it works with the callback for fabric it would be great to see it as a pull request to fabric.js library, i.e. extending the loadSVGFromString function to support tspans 'natively'. |
|
Any update on this? |
1 similar comment
|
Any update on this? |
|
no we are busy with other tasks sadly and we didn't do any new feature development |
|
but if anyone wants to PR I can back them |
|
Did you find any alternative solution to import a simple svg with correctly aligned text? <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="637" height="1012" viewBox="305.5 50 637 1012" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 624.5 556.5)" id="stage">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" x="-318.5" y="-506" rx="0" ry="0" width="637" height="1012"/>
</g>
<g transform="matrix(6.49 0 0 10.53 628.5 566.91)" id="rect-001pu2rkl">
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(135,216,203); fill-rule: nonzero; opacity: 1;" x="-49.5" y="-49.5" rx="0" ry="0" width="99" height="99"/>
</g>
<g transform="matrix(6.66 0 0 6.66 486.08 127.53)" style="" id="itext-001k23wx5">
<text xml:space="preserve" font-family="Calibri" font-size="20" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(254,254,254); fill-rule: nonzero; opacity: 1; white-space: pre;"><tspan x="-21.69" y="6.28">Texto</tspan></text>
</g>
</svg>svg
Fabric.js
|
|
Most of my files are in PDF and PSD formats, and now they are parsed directly into JSON as templates |
|
@more-strive I managed to implement export to PDF, exporting from fabic.js to svg and adding it to the PDF via jsPDF |
|
PDF is parsed through pymupdf, but CDR has not yet implemented parsing |
|
Any Update on this? Or any workaround to get the correct left and top values for text elements when importing the svg to canvas? |
|
Hey @developersgit this is a long standing feature i was planning to take up again now that 6.0 is stable. |
|
I found the workaround for loadSVGFromString(reader.result as string).then((output) => {
const {objects, elements} = output
objects.forEach((obj, index) => {
if (obj && obj.type === 'text') {
const currentElement = elements[index]
if (currentElement.children.length > 0 && currentElement.children[0].tagName === 'tspan') {
const tspan = currentElement.children[0]
// @ts-expect-error; TODO: define tspan types properly
const { x, y } = tspan.attributes
// THE FIX: Update x and y position of text object
obj.left += Number(x.value)
obj.top += Number(y.value)
}
// @ts-expect-error; TODO: define obj types properly
const text = new Textbox(obj.text, {
...obj,
snapAngle: 45,
snapThreshold: 1,
editable: true,
})
return canvas?.add(text);
}
obj && canvas?.add(obj);
})
})hope this helps |
and others
So these issues all relate to the
fabric.loadSVGFromStringmethod, when given a string such as:Which given the SVG rendered here:
Produces the following output:
Which is doing several things wrong:
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
The text was updated successfully, but these errors were encountered: