CODEWITHSUNDEEP
javacsssvgjavafx
Marcus Ataide
Marcus Ataide

Reputation: 7530

svg to -fx-shape in JavaFX

I´d like to set this svg file to my CSS button in JavaFX. It works but it dont show the dot from "?" mark.

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>

My CSS Button:

/* 
 * 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;
}

Upvotes: 0

Views: 3121

Answers (1)

KevB
KevB

Reputation: 391

The SVG definition contains two paths and a rectangle. The two paths define the outer circle and the main part of the question mark. The rectangle defines the dot of the question mark. Your CSS only contains the two paths, and is missing the rectangle. You can include the rectangle in your existing CSS by re-writing it as a simple path like this:

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

Then add this into your existing 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;
}

Upvotes: 2

Related Questions