如何在JavaFX中正确显示此特定形状的路径？

Question

Firstly, I'm a beginner in JavaFX coding. Here, I'm actually trying to implement the Material Design checkbox as you can see right here , and using the API's default CheckBox for testing, here's what I currently have:

Overriding CheckBox 's shape:

.check-box > .box > .mark {
  /* SVG path directly copied from the site. */
  -fx-shape: "M1.73,12.91 8.1,19.28 22.79,4.59";
}

Resulting to this:

So basically, I just copied the SVG path used by the MD checkbox component from here but it's not properly displayed as what the image above portrays in my case. All I knew is the basics about SVG paths but drawing such complicated paths like the one I'm referring above is difficult for me.

Now, my question is how can I fix this one? Thanks for all the answers.

---

UPDATE

For others who were curious about what @Itai's provided shape path looks like, here it is:

Answer 1

The path given in -fx-shape is the shape of the region, and is implicitly closed (last point connected to first) - this explains the result you are seeing, where the top right corner is connected back to the top left to create a triangle.

You may be able to use this exact path using an SVGPath node, as in this question: How to style a SVG using CSS in javaFX FXML

Another possibility is to "transform" the path to the outline of the shape you want - by retracing the points in reverse order with slightly higher (or lower) Y values:

.check-box > .box > .mark {
    /* SVG path directly copied from the site. */
    -fx-shape: "M1.73,12.91 8.1,19.28 22.79,4.59 22.79,1.59 8.1,16.28 1.73,9.91";
}

In this case I have subtracted 3 from the Y values of every point and repeated them in reverse order, so get the original shape, 3 pixels wide. Note that this very basic transformation doesn't simulate any "miter" or "joint" effect, but it works in a pinch.