如何在 javaFX FXML 中使用 CSS 设置 SVG 样式

Question

我将 SVG 用于按钮中的图像。但是我无法通过 CSS 为其填充颜色。下面是呈现按钮的代码。

<Button  onAction="#closeApplication" >
<graphic>
 <SVGPath content="M10,16 10,0 0,8z" styleClass="button‐icon‐shape" />
</graphic>
</Button>

这里是 css

.button-icon-shape SVGPath{
   -fx-fill:  red;
}

Answer 1

这是它的工作原理。我必须为按钮设置样式并使用 class 为按钮中的 svg 设置样式。

<Button  onAction="#closeApplication" styleClass="closeButton">
        <graphic>
            <SVGPath content="M10,16 10,0 0,8z"  />
        </graphic>
</Button>

这里是 css

.closeButton{

}
.closeButton SVGPath{
   -fx-fill:  red;
}

Answer 2

我知道这是一个老问题，但这个 OP 解决方案并不是我心目中的最佳解决方案。如果您遇到同类问题，我的建议是阅读JavaFX CSS Reference Guide (JFX 8) and especially the redirection to this selectors link。

此处使用初始代码的最简单解决方案如下：

<Button onAction="#closeApplication">
    <graphic>
        <SVGPath content="M10,16 10,0 0,8z" styleClass="button-icon-shape" />
    </graphic>
</Button>

与 JavaFX CSS 关联的是：

.button-icon-shape {
   -fx-fill:red;
}

如何在 javaFX FXML 中使用 CSS 设置 SVG 样式

How to style a SVG using CSS in javaFX FXML

css

svg

fxml

javafx-8