如何在JavaFX中正确渲染Material Design复选框的SVG路径？

嘿，作为JavaFX新手尝试复刻Material Design复选框，这个坑我之前刚踩过！你遇到的显示异常，核心原因是Material Design Web的SVG路径坐标系统和JavaFX的-fx-shape适配逻辑不匹配——Material的路径是基于24x24的标准画布设计的，而JavaFX默认CheckBox的标记（mark）区域尺寸更小，直接套用会导致路径超出显示范围、变形。

解决步骤 #

1. 调整SVG路径的坐标比例

把Material的原始路径坐标按比例缩小，同时确保对勾在复选框框内居中。你可以使用这个修正后的路径：

.check-box > .box > .mark {
    /* 适配JavaFX尺寸的Material风格对勾路径 */
    -fx-shape: "M1.3,9.68 6.08,14.46 17.09,3.44";
    -fx-scale-shape: false; /* 防止形状被自动缩放变形 */
    -fx-background-color: white; /* 选中时对勾的颜色，贴合Material设计 */
}

2. 补充完整的Material风格样式

为了更贴近Material Design的视觉效果，你可以给复选框加上边框、背景色的联动样式：

/* 基础复选框样式 */
.check-box {
    -fx-font-size: 14px; /* 匹配Material的文字大小 */
}

/* 复选框容器样式 */
.check-box > .box {
    -fx-background-color: white;
    -fx-border-color: #757575; /* 默认边框色 */
    -fx-border-radius: 2px; /* Material的圆角 */
    -fx-padding: 3px; /* 预留对勾的显示空间 */
    -fx-min-width: 18px;
    -fx-min-height: 18px;
}

/* 选中状态的容器样式 */
.check-box:selected > .box {
    -fx-background-color: #2196F3; /* Material主题蓝 */
    -fx-border-color: #2196F3;
}

/* 悬停、聚焦状态的样式（可选） */
.check-box:hover > .box {
    -fx-border-color: #424242;
}
.check-box:focused > .box {
    -fx-border-color: #2196F3;
    -fx-border-width: 2px;
}

为什么原始路径会异常？ #

Material Web提供的SVG路径"M1.73,12.91 8.1,19.28 22.79,4.59"是基于viewBox="0 0 24 24"设计的，而JavaFX的CheckBox标记区域默认尺寸远小于24px，直接使用会导致路径的部分坐标超出绘制区域，最终显示出截断、变形的效果。

你提到@Itai提供的路径显示正常，就是因为那个路径已经完成了坐标比例的适配，完美匹配JavaFX的绘制区域尺寸。

内容的提问来源于stack exchange，提问作者Küroro