2

如果您想知道为什么这是必要的，或者想提出更好的方法来解决更大的问题，请随时询问更多上下文。（它涉及在校园地图上布置一堆建筑平面图，并找到这些建筑地图中某些事物的绝对位置；更多细节使问题陷入困境。）

简短的版本是我想获取一个具有 <image xlink:href="something.svg" /> 引用的 SVG 文件并将其合并到一个大文件中，每个引用的 SVG 都嵌入一个 <svg> 和内联 SVG XML内容。

因此，我的顶级源文件（在 Inkscape 中编写）如下所示：

<image xlink:href="floorplans/bldg1.svg"
width="165.52684" height="107.10559" y="-1937.7657"
x="2507.1565" transform="matrix(0,1,-1,0,0,0)" />

我尝试合并版本以内联所有矢量数据：

<svg x="2507.1565" y="-1937.7657" width="165.52684" height="107.10559"
transform="matrix(0,1,-1,0,0,0)" viewBox="0 0 1224 792">
<g id="surface0">
<path style="fill:none;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);...

因此，基本上我使用脚本将 <image> 替换为 <svg> 并粘贴到“floorplans/bldg1.svg”的根 <svg> 的内容中。（将 <image> 的属性复制到 <svg>，并将 viewBox 属性从原始 <svg> 复制到新的。）

这种技术适用于不旋转的东西，但 Chrome 似乎在说这个特定元素不在视口的顶部。我是 SVG 的新手，但我认为 <svg> 上的转换顺序与 <image> 上的不同。我是否犯了一个我没有发现的愚蠢错误，或者在将 <image xlink:href="something.svg" transform=... /> 转换为具有内联 XML 的 <svg> 时涉及更多内容？

谢谢。

4

1 回答 1

2

根据 SVG 规范，transform 属性不适用于 <svg> 元素。您可以将 <image> 元素上的转换放在 <g> 元素的外部或内部，而不是 <svg> 。

以这种方式进行变换的原因是 <svg> 元素设置了坐标系，并且变换依赖于它（如果它确实适用，则会出现一个问题是“应该在坐标空间之前或之前在坐标空间中解释变换吗？设置 svg 坐标系后？”）

于 2011-05-08T08:08:59.367 回答