css - 如何在 JavaFX 中使用 CSS 将多路径 SVG 设置为形状

Question

我有一些我想在我的应用程序中使用的按钮图标，例如 USB 图标，它包含多个路径来定义 SVG 形状。

现在我将一个区域分配给按钮图形属性，使用 Java 构建一个多路径 SVG，然后将它作为一个形状分配给该区域。

这是多路径图标的当前解决方案(使用 Java):

SVGPath usb1 = new SVGPath();
usb1.setContent("M44,18H42V3a1,1,0,0,0-1-1H23a1,1,0,0,0-1,1V18H20a1,1,0,0,0-1,1V49a13,13,0,0,0,26,0V19A1,1,0,0,0,44,18ZM24,4H40V18H24ZM43,49a11,11,0,0,1-22,0V20H43Z");

SVGPath usb2 = new SVGPath();
usb2.setContent("M37,13H34a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1h3a1,1,0,0,1,1,1v3A1,1,0,0,1,37,13Zm-2-2h1V10H35Z");

SVGPath usb3 = new SVGPath();
usb3.setContent("M30,13H27a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1h3a1,1,0,0,1,1,1v3A1,1,0,0,1,30,13Zm-2-2h1V10H28Z");

SVGPath usb4 = new SVGPath();
usb4.setContent("M41,42a3,3,0,1,0-4,2.816v3.566l-4,2V29.414l2.293,2.293a1,1,0,0,0,1.414-1.414l-4-4a1,1,0,0,0-1.414,0l-4,4a1,1,0,0,0,1.414,1.414L31,29.414V44.382l-4-2V40h1a1,1,0,0,0,1-1V36a1,1,0,0,0-1-1H24a1,1,0,0,0-1,1v3a1,1,0,0,0,1,1h1v3a1,1,0,0,0,.553.9L31,46.618V55a1,1,0,0,0,2,0V52.618L38.447,49.9A1,1,0,0,0,39,49V44.816A3,3,0,0,0,41,42ZM25,37h2v1H25Zm13,6a1,1,0,1,1,1-1A1,1,0,0,1,38,43Z");

Shape s = Shape.union(Shape.union(usb1,usb2),Shape.union(usb3,usb4));
((Region) paramUsbButton.getGraphic()).setShape(s);

对于单路径图标(使用 CSS):

.finished-button Region{
    -fx-background-color:black;
    -fx-shape:"M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M40.495,17.329l-16,18 C24.101,35.772,23.552,36,22.999,36c-0.439,0-0.88-0.144-1.249-0.438l-10-8c-0.862-0.689-1.002-1.948-0.312-2.811 c0.689-0.863,1.949-1.003,2.811-0.313l8.517,6.813l14.739-16.581c0.732-0.826,1.998-0.9,2.823-0.166 C41.154,15.239,41.229,16.503,40.495,17.329z";
}

我想直接在 CSS 中管理所有图标形状，有没有一种方法可以做到这一点，而不必为多路径 SVG 使用 Java？

Answer 1

-fx-shape 属性不限于单个路径。您可以简单地创建路径的串联以获得并集。通过这种方式，您可以轻松地获得与 CSS 中的 -fx-shape 属性一起使用的路径联合。

@Override
public void start(Stage primaryStage) throws Exception {
    // 2 seperate paths to combine
    String path1 = "M0,0h100v100h-100z";
    String path2 = "M100,0l50,50l-50,50z";

    Region region = new Region();
    region.setPrefSize(150, 100);
    region.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
    region.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
    region.setStyle("-fx-background-color: red; -fx-shape: \""+ path1 + path2 + "\";");

    primaryStage.setScene(new Scene(new StackPane(region), 300, 300));
    primaryStage.show();
}

为方便起见，上面的示例使用内联样式，但您可以使用以下样式表轻松实现相同的效果。

.root>Region {
    -fx-shape: "M0,0h100v100h-100zM100,0l50,50l-50,50z";
    -fx-background-color: red;
}