Question

我有一个类似于this one的问题。也就是说，我有一个由Inkscape创建的SVG文件，并且在我想要删除的路径上还有其他转换。

现在不是有变换矩阵，而是有不同类型的变换。例如，标题如下：

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="32"
   height="32"
   viewBox="0 0 16.146082 22.465583"
   id="svg2"
   xml:space="preserve"
   ...
</svg>

显然，这种混乱被解释为某种翻译和缩放。如果我删除viewBox属性，则路径会缩小并显示在左侧。因此，如果我只是复制路径定义，我的图像不是32 x 32而是更小。

如何平移viewBox以某种方式引入的变换，以便将其集成到显式路径坐标中？

Answer 1

首先，您应该阅读SVG规范中有关viewBox和视口转换如何工作的部分。

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

目前尚不清楚是否要将视口转换实际上与所有内容坐标相乘，或者只是实现等效结果。我将假设后者。

在您的情况下，viewBox（大致）是16x22。这比它宽，因此高度将从22-> 32扩大，宽度按相同的比例16-> 23左右。

默认preserveAspectRatio为xMidYMid，表示水平和垂直居中。由于此对象现在缩放到全高（32），因此它不会垂直居中，因此它只会水平居中。

要删除viewBox并获取等效变换，您只需使用组元素（<g>）包围SVG的内容即可。然后给出等效变换。

因此，对于等效变换，我们必须结合比例和平移。

比例部分只是：32 / 22.465583 = 1.42440

这使得新的高度现在为32。

新宽度为：1.42440 * 16.146082 = 22.99850。

我们需要将其置于中心位置，因此有一个转变（32 - 22.99850）/ 2 = 4.50075

所以group元素需要：

<g tramsform="translate(4.50075,0) scale(1.42440)">
   ...rest of svg...
</g>

要模拟您的文件，我们将使用此等效文件。红色矩形表示当前文件的内容。

<svg width="32" height="32" viewBox="0 0 16.146082 22.465583">
    <rect width="16.146082" height="22.465583" fill="red"/>
</svg>

Demo here。我已经为SVG添加了一个边框，以显示SVG的32x32宽度和高度。

所以现在让我们删除viewBox并应用我们的新组并转换：

<svg width="32" height="32">
    <g transform="translate(4.50075,0) scale(1.42440)">
        <rect width="16.146082" height="22.465583" fill="red"/>
    </g>
</svg>

Demo here

我希望这会有所帮助。

Answer 2

我创建了第二个空文档，并使用 copy ，然后使用 paste-in-place 。 viewBox不是新文档的一部分，但您必须使用链接问题中描述的方法进行转换（删除g组节点，然后使用绝对坐标重新定位）。

摆脱Inkscape生成的SVG中的viewBox变换

2 个答案: