Geek Answers Handbook

How to center scale vector graphics on a button?

I want to draw the scaled SVGPath nodes in the center. The button must maintain a size independent of the size of the image, and SVGPaths must maintain their relative positions.

I am new to JavaFX, so maybe I'm wrong. Basically I am trying to create a button without text with an overlay SVG image.

The problem is that the button image is shifted.

<Button prefWidth="30" prefHeight="30">
    <padding>
        <Insets top="0" right="0" bottom="0" left="0"/>
    </padding>
    <graphic>
        <Pane scaleX="0.3" scaleY="0.3">
            <SVGPath fill="BLACK" content="M92.032,33.384L69.047,55.835l5.465,31.662L46.057,72.576L17.634,87.557l5.398-31.673L0,33.481l31.791-4.654L45.98,0
l14.25,28.797L92.032,33.384z"/>
            <SVGPath fill="RED"
                     content="M65.681,48.339c0,10.776-8.804,19.512-19.665,19.512s-19.665-8.736-19.665-19.512
            s8.804-19.512,19.665-19.512S65.681,37.563,65.681,48.339z"/>
        </Pane>
    </graphic>
</Button>
+4
source share
1 answer

I have found a solution. I think the key was this part of the documentation Group:

" , , , . , , , , ."

<Group>
   <Pane scaleX="0.25" scaleY="0.25">
       <SVGPath fill="BLACK"
             content="M92.032,33.384L69.047,55.835l5.465,31.662L46.057,72.576L17.634,87.557l5.398-31.673L0,33.481l31.791-4.654L45.98,0
l14.25,28.797L92.032,33.384z"/>
       <SVGPath fill="RED"
             content="M65.681,48.339c0,10.776-8.804,19.512-19.665,19.512s-19.665-8.736-19.665-19.512
            s8.804-19.512,19.665-19.512S65.681,37.563,65.681,48.339z"/>
   </Pane>
</Group>
+1

More articles:


All Articles