如何在按钮上居中缩放矢量图形？

Question

我想绘制以按钮为中心的缩放 SVGPath 节点。按钮应保持其大小独立于图像大小，SVGPath 应保持其相对位置。

我是 JavaFX 的新手，所以我可能采用了错误的方法。基本上我正在尝试创建没有文本的按钮和叠加的 SVG 图像。

问题是按钮图像移位了。

<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>

Answer 1

我找到了解决方案。我认为关键是 Group 文档的这一部分：

"Any transform, effect, or state applied to a Group will be applied to all children of that group. Such transforms and effects will NOT be included in this Group's layout bounds, however if transforms and effects are set directly on children of this Group, those will be included in this Group's layout bounds."

<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>

如何在按钮上居中缩放矢量图形？

How to center scaled vector graphic on Button?

svg

javafx

button

fxml