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

【问题标题】：Get rid of viewBox transform in an Inkscape generated SVG摆脱 Inkscape 生成的 SVG 中的 viewBox 变换
【发布时间】：2014-08-19 16:10:26
【问题描述】：

我有一个类似于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 引入的变换展平，以便将其集成到显式路径坐标中？

【问题讨论】：

标签： svg inkscape

【解决方案1】：

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

【讨论】：

【解决方案2】：

首先，您可能应该阅读 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>

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

我希望这会有所帮助。

【讨论】：