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

Question

我有一个与此类似的问题。也就是说，我有一个由 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

所以组元素需要是：

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

演示在这里。我向 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>

演示在这里

我希望这有帮助。

Answer 2

我创建了第二个空文档，并使用复制然后粘贴就地。它viewBox不是新文档的一部分，但您必须使用链接问题中描述的方法摆脱它（删除g组节点，然后使用绝对坐标重新定位。）。