java - JavaFX 中的 svg 到 -fx-shape

Question

我想在 JavaFX 中将此 svg 文件设置为我的 CSS 按钮。它有效，但不显示“？”中的点。标记。

SVG:

<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="35px" height="35px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve">
<g>
    <path fill="#E0DFDF" d="M19.271,11.488c0.455,0.56,0.681,1.22,0.681,1.98c0,0.544-0.155,1.067-0.465,1.573
        c-0.172,0.286-0.396,0.563-0.676,0.827l-0.932,0.921c-0.894,0.879-1.472,1.657-1.736,2.338c-0.264,0.679-0.396,1.575-0.396,2.685
        h2.075c0-0.978,0.111-1.718,0.333-2.219c0.221-0.502,0.705-1.111,1.45-1.836c1.026-0.995,1.707-1.749,2.044-2.261
        c0.338-0.512,0.508-1.18,0.508-2.005c0-1.358-0.459-2.476-1.381-3.351c-0.921-0.875-2.146-1.311-3.677-1.311
        c-1.654,0-2.956,0.511-3.904,1.532c-0.948,1.021-1.422,2.371-1.422,4.049h2.075c0.038-1.01,0.198-1.783,0.477-2.32
        c0.496-0.962,1.393-1.443,2.692-1.443C18.065,10.648,18.818,10.928,19.271,11.488L19.271,11.488z"/>
    <rect x="15.699" y="23.746" fill="#E0DFDF" width="2.32" height="2.423"/>
    <path fill="#E0DFDF" d="M35,17.5C35,7.835,27.165,0,17.5,0S0,7.835,0,17.5S7.835,35,17.5,35S35,27.165,35,17.5L35,17.5z
         M1.591,17.5c0-8.787,7.122-15.909,15.909-15.909S33.409,8.713,33.409,17.5S26.287,33.409,17.5,33.409S1.591,26.287,1.591,17.5
        L1.591,17.5z"/>
</g>
</svg>

我的 CSS 按钮:

/* 
 * QUESTION-BUTTON
 */
.button-action--question {
    -fx-background-radius: 0;
    -fx-background-color: -color-primary;
    -fx-shape: "M19.271,11.488c0.455,0.56,0.681,1.22,0.681,1.98c0,0.544-0.155,1.067-0.465,1.573
        c-0.172,0.286-0.396,0.563-0.676,0.827l-0.932,0.921c-0.894,0.879-1.472,1.657-1.736,2.338c-0.264,0.679-0.396,1.575-0.396,2.685
        h2.075c0-0.978,0.111-1.718,0.333-2.219c0.221-0.502,0.705-1.111,1.45-1.836c1.026-0.995,1.707-1.749,2.044-2.261
        c0.338-0.512,0.508-1.18,0.508-2.005c0-1.358-0.459-2.476-1.381-3.351c-0.921-0.875-2.146-1.311-3.677-1.311
        c-1.654,0-2.956,0.511-3.904,1.532c-0.948,1.021-1.422,2.371-1.422,4.049h2.075c0.038-1.01,0.198-1.783,0.477-2.32
        c0.496-0.962,1.393-1.443,2.692-1.443C18.065,10.648,18.818,10.928,19.271,11.488L19.271,11.488z M35,17.5C35,7.835,27.165,0,17.5,0S0,7.835,0,17.5S7.835,35,17.5,35S35,27.165,35,17.5L35,17.5z
         M1.591,17.5c0-8.787,7.122-15.909,15.909-15.909S33.409,8.713,33.409,17.5S26.287,33.409,17.5,33.409S1.591,26.287,1.591,17.5
        L1.591,17.5z";
    -fx-background-size: 25px;
}

Answer 1

SVG 定义包含两条路径和一个矩形。这两条路径定义了外圈和问号的主要部分。矩形定义问号的点。您的 CSS 仅包含两条路径，并且缺少矩形。您可以将矩形重写为如下简单路径，从而将其包含在现有 CSS 中:

M15.699,23.746,18.019,23.746,18.019,26.169,15.699,26.169

然后将其添加到您现有的 CSS 中:

.button-action--question {
    -fx-background-radius: 0;
    -fx-background-color: -color-primary;
    -fx-shape: "M19.271,11.488c0.455,0.56,0.681,1.22,0.681,1.98c0,0.544-0.155,1.067-0.465,1.573
        c-0.172,0.286-0.396,0.563-0.676,0.827l-0.932,0.921c-0.894,0.879-1.472,1.657-1.736,2.338c-0.264,0.679-0.396,1.575-0.396,2.685
        h2.075c0-0.978,0.111-1.718,0.333-2.219c0.221-0.502,0.705-1.111,1.45-1.836c1.026-0.995,1.707-1.749,2.044-2.261
        c0.338-0.512,0.508-1.18,0.508-2.005c0-1.358-0.459-2.476-1.381-3.351c-0.921-0.875-2.146-1.311-3.677-1.311
        c-1.654,0-2.956,0.511-3.904,1.532c-0.948,1.021-1.422,2.371-1.422,4.049h2.075c0.038-1.01,0.198-1.783,0.477-2.32
        c0.496-0.962,1.393-1.443,2.692-1.443C18.065,10.648,18.818,10.928,19.271,11.488L19.271,11.488z 
M15.699,23.746,18.019,23.746,18.019,26.169,15.699,26.169
M35,17.5C35,7.835,27.165,0,17.5,0S0,7.835,0,17.5S7.835,35,17.5,35S35,27.165,35,17.5L35,17.5z
         M1.591,17.5c0-8.787,7.122-15.909,15.909-15.909S33.409,8.713,33.409,17.5S26.287,33.409,17.5,33.409S1.591,26.287,1.591,17.5
        L1.591,17.5z";
    -fx-background-size: 25px;
}