SVG Text Path is mirrored in output

[ss32]

I am rendering a font to an SVG path and was very happy to find this package, but when I render the image the words are mirrored about the x axis. Is there an option I have missed?

package main

import (
	"fmt"
	"log"
	"os"

	"github.com/tdewolff/canvas"
	"github.com/tdewolff/canvas/text"
)

func main() {
	fontFamily := canvas.NewFontFamily("Tangerine")
	if err := fontFamily.LoadFontFile("Tangerine-Regular.ttf", canvas.FontRegular); err != nil {
		panic(err)
	}

	face := fontFamily.Face(300.0, canvas.Black, canvas.FontRegular, canvas.FontNormal)
	//face.Direction = text.LeftToRight  // I tried all of these but nothing corrected it.
	path, _, err := face.ToPath("Verb")
	if err != nil {
		panic(err)
	}
	//newPath, _, err := face.ToPath("me to svg path") // Trying to add a new line
	//if err != nil {
	//	panic(err)
	//}
	//path = path.Append(newPath)

	tpl := `<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="400" width="800">
    <path d="%s" />
</svg>`
	//fmt.Printf(tpl, path.ToSVG())
	file, err := os.Create("output.svg")
	if err != nil {
		log.Fatalf("failed creating file: %s", err)
	}
	defer file.Close()
	_, err = file.WriteString(fmt.Sprintf(tpl, path.ToSVG()))
	if err != nil {
		log.Fatalf("failed writing to file: %s", err)
	}
}

[ss32]

The same text from https://danmarshall.github.io/google-font-to-svg-path/

[ss32]

	path = path.Transform(canvas.Matrix{
		{-1.0, 0.0, 0.0},
		{0.0, -1.0, 0.0},
	})

Is the affine transform to rotate pi rads but the result is an empty frame; the text is out of the view window.

[ss32]

Where is the center of rotation? I tried moving the text down and to the right thinking maybe the COR isn't center of text but still nothing is visible in the SVG

	m := canvas.Matrix{
		{-1.0, 0.0, 50.0},
		{0.0, -1.0, 50.0},
	}
	tx, ty, theta, sx, sy, phi := m.Decompose()
	fmt.Printf("tx: %f, ty: %f, theta: %f, sx: %f, sy: %f, phi: %f\n", tx, ty, theta, sx, sy, phi)

$ go run main.go 
tx: 50.000000, ty: 50.000000, theta: 0.000000, sx: 1.000000, sy: 1.000000, phi: 180.000000

[tdewolff]

Note that SVG has its origin in the top-left corner, while Canvas uses the mathematical default of the bottom-left. You should flip the Y axis (Path.Scale(1.0,-1.0)) and perhaps a translation, or use the SVG renderer.

Rotations are always around the origin (0,0) at the bottom-left. You can use Identity.RotateAbout(deg, x, y) to rotate about (x,y) with deg degrees counter clockwise.

[ss32]

Flipping on the Y axis and then translating got me the result I needed, thank you.

package main

import (
	"fmt"
	"log"
	"os"

	"github.com/tdewolff/canvas"
)

func main() {
	fontFamily := canvas.NewFontFamily("Tangerine")
	if err := fontFamily.LoadFontFile("Tangerine-Regular.ttf", canvas.FontRegular); err != nil {
		panic(err)
	}

	face := fontFamily.Face(100.0, canvas.Black, canvas.FontRegular, canvas.FontNormal)
	// face.Direction = text.BottomToTop
	path, _, err := face.ToPath("Change me to svg path")
	if err != nil {
		panic(err)
	}
	m := canvas.Matrix{
		{1.0, 0.0, 0.0},
		{0.0, 1.0, 100.0},
	}
	tx, ty, theta, sx, sy, phi := m.Decompose()
	fmt.Printf("tx: %f, ty: %f, theta: %f, sx: %f, sy: %f, phi: %f\n", tx, ty, theta, sx, sy, phi)
	path = path.Scale(1.0, -1.0)
	path = path.Transform(m)

	tpl := `<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="400" width="800">
    <path d="%s" />
</svg>`
	//fmt.Printf(tpl, path.ToSVG())
	file, err := os.Create("output.svg")
	if err != nil {
		log.Fatalf("failed creating file: %s", err)
	}
	defer file.Close()
	_, err = file.WriteString(fmt.Sprintf(tpl, path.ToSVG()))
	if err != nil {
		log.Fatalf("failed writing to file: %s", err)
	}
}

One more question: Is it possible to add multiple lines in a single path? Or do I need to manually add paths and then translate down?

[ss32]

oh also how does the SVG renderer differ from this method?

[tdewolff]

Yes you can have multiple "subpaths" in one path. Just add a new M and the subsequent commands. Note that overlapping subpaths may cancel out depending on the fill rule.

The SVG renderer doesn't need any flipping or translations!

[ss32]

Ok I'll look into the renderer, thanks for the quick responses! This package is a lifesaver and very well commented/documented.

[tdewolff]

Thank you for the compliments! I'm working right now on a major rewrite of the path intersections code and path boolean operations, state of the art stuff! See https://github.com/tdewolff/canvas/wiki/Paths#boolean-operations for an example, maybe you'll need it ;-)