Как я могу правильно отобразить этот конкретный путь формы в JavaFX?

Question

Во-первых, я новичок в кодировании JavaFX.Здесь я на самом деле пытаюсь установить флажок Material Design, как вы можете видеть справа здесь , и с помощью API по умолчанию CheckBox для тестирования, вот что у меня сейчас есть:

Переопределение формы CheckBox:

.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";
}

В результате этого:

В общем, я просто скопировал путь SVG, используемый компонентом флажка MD, из здесь , но он не отображается должным образом, как показано на рисунке выше в моем случае.Все, что я знал, это основы SVG-путей, но рисовать такие сложные пути, как тот, который я имею в виду выше, мне сложно.

Теперь мой вопрос: как я могу это исправить?Спасибо за все ответы.

---

ОБНОВЛЕНИЕ

Для тех, кому было интересно узнать, как выглядит путь формы, предоставленный @ Itai, вот он:

Answer 1

Путь, указанный в -fx-shape, является формой региона и неявно закрыт (последняя точка связана с первой) - это объясняет результат, который вы видите, когда верхний правый угол соединен обратно с верхним левымсоздать треугольник

Вы можете использовать этот точный путь, используя узел SVGPath, как в этом вопросе: Как стилизовать SVG с использованием CSS в javaFX FXML

Другойвозможность состоит в том, чтобы «преобразовать» путь к контуру нужной фигуры - путем пересчета точек в обратном порядке с немного более высокими (или более низкими) значениями Y:

.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";
}

В этом случае я вычел 3от значений Y каждой точки и повторил их в обратном порядке, поэтому получим исходную форму, шириной 3 пикселя.Обратите внимание, что это очень простое преобразование не имитирует никакого эффекта «митры» или «соединения», но работает в крайнем случае.