Weird SVG distortion with TornadoFX

Question

Having a strange issue while using SVGs in TornadoFX. I have a few SVGs strings stored in an enum I'm using as background images in my program. When I view the exact same SVG path in an online viewer, there is no distortion and it appears correctly:

but when I use the same path in TornadoFX as a svgpath node content, it appears like so:

Note the strange thinning of the lines in the top and bottom middle sections.

It's easier to see with the second svg:

Online viewer:

TornadoFX program:

I'm not quite sure what could be causing this. In everything else I view the SVGs in (web, illustrator) they appear fine, but as soon as I load them as a string in a svgpath node, they appear distorted.

I'm initializing them like this:

class mView : View() {

  override val root = stackpane {
    svgpath("M910.7,329.8a446.43,446.43,0,1,0,35,173.23A443.52,443.52.. etc") {
        addClass(SvgStyle)
    }
//..
}

Any ideas what would be causing this strange distortion? I'm pullin my hair out here.

edit: a fiddle of the curvy SVGs

Answer 1

TornadoFX doesn't affect the SVG rendering in any way, so I can't see any other explanation that this being a bug in the SVG rendering capabilities of JavaFX. Perhaps you're using a path expression not supported by JavaFX?

Answer 2

For the sphere, can you try setting the stroke on the SVGPath object as in the following example?

stackpane {
    svgpath("M107 380c40,-101 80,-102 120,-1m-1 -4c39,101 79,102 120,1m-1 4c39,-101 79,-101 120,-1m-1 -2c39,100 79,101 120,1", FillRule.EVEN_ODD) {
        fill = Color.WHITE
        stroke = Color.BLACK
        strokeWidth = 16.0;
    }
}

In the curves part of the question, can you post the full SVG path? I suspect there's something in the path source telling JavaFX to render the thinner segments.