尝试将相对变换矩阵应用于 fabricjs PathGroup
Trying to apply a relative transform matrix to a fabricjs PathGroup
使用 FabricJS，我有一个像这样的向量：
https://jsfiddle.net/sb63df47/
如您所见，viewBox 设置为 0 0 100 100，即使向量被修剪掉空白，viewBox 也会设置为 0 0 30 30。因此，为了使边界框看起来更靠近图标，我将宽度/高度设置为 30 和 30。但是，当我这样做时，PathGroup 对象中的子路径已关闭（顶部的 35 和左侧的 35）。
为了解决这个问题，我应用了一个变换矩阵 "move" 返回到它们需要的位置的路径。但是这样做会带来一大堆其他问题。具体来说，当我旋转矢量时，转换关闭（参见此处：https://i.imgur.com/RxoMBdj.png）
如果我知道要设置的确切宽度/高度，是否有更优雅的方法来缩小 PathGroup 的 viewBox？
每个 SVG 都是一个特定的情况，
无论如何，如果你想修改对象，你必须注意 transform 属性。
这里有一个translate变换，就是移动35x和35y的物体。
从包含路径的组中删除变换属性，十字将位于边界框的左上角。
然后如果你想让边界框缩小，把viewbox改成0 0 30 30
一个等效的转换是将视框设置为 35 35 30 30，这将同时应用角部移动和收缩。
获得相同效果的方法有很多种。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 30 30" version="1.1" x="0px" y="0px"><title>add</title><desc>Created with Sketch.</desc><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g sketch:type="MSArtboardGroup" fill="#000000"><g sketch:type="MSLayerGroup" ><path d="M0,14 L30,14 L30,16 L0,16 L0,14 Z" sketch:type="MSShapeGroup"></path><path d="M14,0 L16,0 L16,29.94 L14,29.94 L14,0 Z" sketch:type="MSShapeGroup"></path></g></g></g></svg>
使用 FabricJS，我有一个像这样的向量：
https://jsfiddle.net/sb63df47/
如您所见，viewBox 设置为 0 0 100 100，即使向量被修剪掉空白，viewBox 也会设置为 0 0 30 30。因此，为了使边界框看起来更靠近图标，我将宽度/高度设置为 30 和 30。但是，当我这样做时，PathGroup 对象中的子路径已关闭（顶部的 35 和左侧的 35）。
为了解决这个问题，我应用了一个变换矩阵 "move" 返回到它们需要的位置的路径。但是这样做会带来一大堆其他问题。具体来说，当我旋转矢量时，转换关闭（参见此处：https://i.imgur.com/RxoMBdj.png）
如果我知道要设置的确切宽度/高度，是否有更优雅的方法来缩小 PathGroup 的 viewBox？
每个 SVG 都是一个特定的情况， 无论如何，如果你想修改对象，你必须注意 transform 属性。
这里有一个translate变换，就是移动35x和35y的物体。 从包含路径的组中删除变换属性，十字将位于边界框的左上角。
然后如果你想让边界框缩小，把viewbox改成0 0 30 30
一个等效的转换是将视框设置为 35 35 30 30，这将同时应用角部移动和收缩。
获得相同效果的方法有很多种。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 30 30" version="1.1" x="0px" y="0px"><title>add</title><desc>Created with Sketch.</desc><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g sketch:type="MSArtboardGroup" fill="#000000"><g sketch:type="MSLayerGroup" ><path d="M0,14 L30,14 L30,16 L0,16 L0,14 Z" sketch:type="MSShapeGroup"></path><path d="M14,0 L16,0 L16,29.94 L14,29.94 L14,0 Z" sketch:type="MSShapeGroup"></path></g></g></g></svg>