[Bug]: textboxes move to the right when using canvas.toSVG(...). Using JSON to save and load, all OK.

[Milner99]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

5.2.4

In What environments are you experiencing the problem?

Firefox, Chrome, Safari, Microsoft Edge

Node Version (if applicable)

No response

Link To Reproduction

https://jsfiddle.net/Milner99/fe7ksvb9/3/

Steps To Reproduce

1. Add textbox to canvas
2. Call canvas.toSVG(..) <-- with parameters within example
3. Examine the output SVG (either in console or as file)
4. Text will not be in the same position

Expected Behavior

I would expect the text to stay in the same relative position to the canvas.

Actual Behavior

Text seems to move to the right

Error Message & Stack Trace

No response

[mostafasalloumm]

hello did you find any solution

?

[Milner99]

No I have not yet. Are you experiencing a similar issue @mostafasalloumm ?

[mostafasalloumm]

yess
i did found this but not working perfectly

function deleteTspan(svg) {
  var tspanTagMatch = svg.match(/<tspan.*>(.*)<\/tspan>/)

  var tspanString = null
  var text = null
  var x = null
  var y = null
  var groupString = null
  var matrixString = null
  var xMatrix = null
  var yMatrix = null
  var transformedSvg = svg
  if (tspanTagMatch && tspanTagMatch.length > 1) {
    text = tspanTagMatch[1]

    tspanString = tspanTagMatch[0]
    var coordMatch = tspanString.match(
      /x="(-?\d*\.?\d+)" y="(-?\d*\.?\d+)"/,
    )
    if (coordMatch && coordMatch.length > 2) {
      x = parseFloat(coordMatch[1])
      y = parseFloat(coordMatch[2])
    }

    var groupTagMatch = svg.match(/<g transform.*>/)
    if (groupTagMatch) {
      groupString = groupTagMatch[0]

      // groupString is like <g transform="matrix(a b c d e f)" style=""  > where e = xMatrix et f = yMatrix
      var matrixMatch = groupString.match(
        /matrix\((-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+) (-?\d*\.?\d+)\)/,
      )
      if (matrixMatch && matrixMatch.length > 6) {
        matrixString = matrixMatch[0]
        xMatrix = parseFloat(matrixMatch[5])
        yMatrix = parseFloat(matrixMatch[6])

        if (
          x !== null &&
          y !== null &&
          xMatrix !== null &&
          yMatrix !== null &&
          text !== null &&
          tspanString !== null &&
          groupString !== null &&
          matrixString !== null
        ) {
          var newMatrixString =
            'matrix(' +
            matrixMatch[1] +
            ' ' +
            matrixMatch[2] +
            ' ' +
            matrixMatch[3] +
            ' ' +
            matrixMatch[4] +
            ' ' +
            (x + xMatrix) +
            ' ' +
            (y + yMatrix) +
            ')'

          transformedSvg = svg
            .replace(matrixString, newMatrixString)
            .replace(tspanString, text)

          // console.log('--> svg', svg)
          // console.log('--> transformedSvg', transformedSvg)
        }
      }
    }
  }

  return transformedSvg
}

var svg= canvas.toSVG(null, deleteTspan)

console(svg)

this will remove the span from text
try it maybe it works for you

[Milner99]

Nice addition. I will see if that helps me. Thank you :0)

Ultimately though of course, I feel this functionality shouldn't be required as this is possibly a bug on the toSVG routine. Be good to get an official comment on this and see if a resolution can be added to the roadmap for a future version of fabricjs (not to far away ideally lol!)

[ShaMan123]

please revise the repro so the output is visible w/o any effort

[Milner99]

An approx timeline could be very useful. Happy to provide as many code samples as required to get this resolved. It's a blocker for my project.

[ShaMan123]

I didn't see you revised the repro.

#8420 has been merged, #8421 will be merged soon enough.
I will then port this PR and related ones.
And then you can promote a fix.
I can back you

[asturur]

hi @Milner99 i updated your fiddle
https://jsfiddle.net/0xoaer3y/6/

The text moves to the right because you are fiddling with the svg viewport and is behaving as expect.
You are constraining the SVG to count the space of the first 480px in width and height, while the canvas is 600px.
At that point a piece of your canvas in the svg gets cropped out and it seems that it moved, while is still at the correct position.

[asturur]

if you see a clearer example you will realize is not moved, is cropped, exactly what the viewBox is meant to do.