JavaFX中如何设置-fx-shape的SVG路径宽度优化聊天框样式

我在JavaFX中为TextArea创建聊天框样式，编写了如下Java代码：

TextArea ta = new TextArea();
ta.getStyleClass().add("chat-bubble");

VBox vb = new VBox(9);
VBox.setMargin(ta, new Insets(10,10,10,10));
vb.getChildren().addAll(ta);

Scene scene = new Scene(vb, 200, 300);
scene.getStylesheets().add("resources/ta.css");
stage.setScene(scene);
stage.show();

对应的CSS文件（resources/ta.css）：

TextArea {
    -fx-background-insets: 0;
    -fx-background-color: transparent;
}

TextArea .scroll-pane {
    -fx-background-color: transparent;
}

TextArea .scroll-pane .viewport{
    -fx-background-color: transparent;
}

TextArea .scroll-pane .content{
    -fx-background-color: transparent;
}

.chat-bubble {
    -fx-shape: "M334.266,29.302c-4.143,0-7.5,3.358-7.5,7.5v210.632H177.423c-1.656,0-3.266,0.548-4.578,1.559L120,289.717v-34.783c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v50.031c0,2.858,1.625,5.468,4.19,6.73c1.05,0.517,2.182,0.77,3.309,0.77c1.626,0,3.242-0.529,4.579-1.56l62.9-48.472h154.288c4.143,0,7.5-3.358,7.5-7.5V36.802 C341.766,32.659,338.409,29.302,334.266,29.302 M72.884,247.433H15V44.302h272.883c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5H7.5c-4.142,0-7.5,3.358-7.5,7.5v218.132c0,4.142,3.358,7.5,7.5,7.5h65.384c4.142,0,7.5-3.358,7.5-7.5S77.026,247.433,72.884,247.433z";
    -fx-background-color: darkred;
    -fx-padding: 3 3 10 3;
}

VBox {
    -fx-background-color: transparent;
}

但聊天框的路径线条过粗，尝试调整border-width、stroke-width等CSS属性及通过代码设置均无效，请问该如何设置-fx-shape路径的线条宽度？

首先明确：-fx-shape是用来定义节点的裁剪形状，它没有直接的线条宽度属性——你看到的"粗线条"其实是形状边缘与容器的视觉叠加，或是形状本身的轮廓被拉伸导致的效果。要实现可控宽度的边框聊天框，推荐以下两种方法：

方法1：双层节点模拟边框 #

通过在外层套一个同形状的Region作为边框层，内层放置TextArea，利用间距控制边框宽度，这是最直观且易维护的方式：

修改后的Java代码 #

TextArea ta = new TextArea();
ta.getStyleClass().add("chat-content");

// 外层边框容器
Region bubbleBorder = new Region();
bubbleBorder.getStyleClass().add("chat-bubble-border");

// 用StackPane叠加边框和内容，margin值即为边框宽度
StackPane bubbleContainer = new StackPane(bubbleBorder, ta);
StackPane.setMargin(ta, new Insets(2)); 

VBox vb = new VBox(9);
VBox.setMargin(bubbleContainer, new Insets(10,10,10,10));
vb.getChildren().addAll(bubbleContainer);

Scene scene = new Scene(vb, 200, 300);
scene.getStylesheets().add("resources/ta.css");
stage.setScene(scene);
stage.show();

修改后的CSS代码 #

/* 保留TextArea的透明样式 */
TextArea {
    -fx-background-insets: 0;
    -fx-background-color: transparent;
}

TextArea .scroll-pane,
TextArea .scroll-pane .viewport,
TextArea .scroll-pane .content {
    -fx-background-color: transparent;
}

/* 边框层：设置形状和边框颜色 */
.chat-bubble-border {
    -fx-shape: "M334.266,29.302c-4.143,0-7.5,3.358-7.5,7.5v210.632H177.423c-1.656,0-3.266,0.548-4.578,1.559L120,289.717v-34.783c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v50.031c0,2.858,1.625,5.468,4.19,6.73c1.05,0.517,2.182,0.77,3.309,0.77c1.626,0,3.242-0.529,4.579-1.56l62.9-48.472h154.288c4.143,0,7.5-3.358,7.5-7.5V36.802 C341.766,32.659,338.409,29.302,334.266,29.302 M72.884,247.433H15V44.302h272.883c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5H7.5c-4.142,0-7.5,3.358-7.5,7.5v218.132c0,4.142,3.358,7.5,7.5,7.5h65.384c4.142,0,7.5-3.358,7.5-7.5S77.026,247.433,72.884,247.433z";
    -fx-background-color: #333; /* 自定义边框颜色 */
}

/* 内容层：设置形状和聊天框底色 */
.chat-content {
    -fx-shape: "M334.266,29.302c-4.143,0-7.5,3.358-7.5,7.5v210.632H177.423c-1.656,0-3.266,0.548-4.578,1.559L120,289.717v-34.783c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v50.031c0,2.858,1.625,5.468,4.19,6.73c1.05,0.517,2.182,0.77,3.309,0.77c1.626,0,3.242-0.529,4.579-1.56l62.9-48.472h154.288c4.143,0,7.5-3.358,7.5-7.5V36.802 C341.766,32.659,338.409,29.302,334.266,29.302 M72.884,247.433H15V44.302h272.883c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5H7.5c-4.142,0-7.5,3.358-7.5,7.5v218.132c0,4.142,3.358,7.5,7.5,7.5h65.384c4.142,0,7.5-3.358,7.5-7.5S77.026,247.433,72.884,247.433z";
    -fx-background-color: darkred;
    -fx-padding: 3 3 10 3;
}

VBox {
    -fx-background-color: transparent;
}

这种方式通过StackPane叠加两个同形状节点，内层TextArea的margin值就是边框的宽度，外层Region的背景色就是边框颜色，调整起来非常灵活。

方法2：手动调整SVG路径坐标（不推荐） #

如果一定要用单个节点，你需要手动修改SVG路径的所有坐标，将轮廓向内收缩——因为-fx-shape是裁剪形状，没有stroke属性，所谓的"粗线条"本质是形状边缘的视觉误差。但这种方式需要精确计算坐标，维护成本极高，仅适合简单形状。

内容的提问来源于stack exchange，提问作者user17022777