我正在开发一个程序，它可以根据用户的选择生成 svg 文件。其中一个选择是在第一个文件中包含另一个以特定点为中心的 svg 文件。第二个文件具有未知的纵横比和大小，但它应该缩放到特定的最大大小，例如高度或宽度，并且应该以一个特定点为中心。 我现在使用的方法是拥有一个包含包含图像的 SVG 标签的 G 标签，并在 G 标签上执行转换以进行缩放和平移。 有没有办法在不知道图像大小的情况下执行缩放以获得特定大小？ 有没有办法让翻译后的坐标应用于图像的中心而不是左上角？ 我对 SVG 很陌生，所以我可能会以错误的方式解决这个问题。是否有更好的方法来获得相同的结果？
【问题讨论】：
我猜你想先隐藏另一个 SVG 文件， 在 JavaScript 中调用 .getBBox() 做一些简单的计算， 设置适当的参数， 取消隐藏
【讨论】：
我明白你的意思，或者至少我是这么认为的。在我的脑海中没有比分组更好的主意了。对我来说<g> 是使用 SVG 文档的一个片段进行操作的最佳方式。但在我看来，将<rect> 元素视为您的视觉数据的容器。也许然后<g> 就没有必要了，这取决于您的编码要求。
如果您只需要放置简单的 SVG 图像，您可以这样做：
<image id="yourSVGImage" xlink:href="yourImg.svg"
x="24px" y="50px" width="527px" height="328px"
preserveAspectRatio="XMinYMin meet"/>
如果您以固定单位（例如像素）表示“宽度”和“高度”，您将实现我认为您需要的。如果需要，还可以使用“preserveAspectRatio”查看此属性。
【讨论】：
编辑：这个答案仍然需要您知道内部 SVG 的大小。最解耦的方式是在浏览器端使用getBBox()方法，大概使用visibility或display来防止用户看到未缩放的图形。 jsFiddle example 已更新为使用此方法。
对于缩放，请使用viewBox attribute。来自 W3C 的文档：
通常需要指定一组给定的图形拉伸以适应特定的容器元素。 “viewBox”属性提供了这种能力。
所有建立新视口的元素（参见elements that establish viewports），...具有“viewBox”属性。 'viewBox' 属性的值是四个数字的列表
<min-x>、<min-y>、<width>和<height>，...它们指定了用户空间中的一个矩形，该矩形应该映射到视口的边界由给定元素建立，考虑到attribute ‘preserveAspectRatio’。Example ViewBox 说明了使用最外层 svg 元素上的“viewBox”属性来指定 SVG 内容应拉伸以适应视口的边界。
上面的示例将preserveAspectRadio 指定为none，因此嵌入的 SVG 会拉伸以完全适合容器 SVG。 preserveAspectRadio 的默认值xMidYMid meet 应该适合您的需要。此属性允许您对how to scale and position the enclosed graphics 进行细粒度控制。
使用viewBox 将内部SVG 缩放到已知大小后，居中应该是一个简单的计算问题并正确使用transform 属性。这是来自http://jsfiddle.net/ento/hPuBY/ 的精简示例：
<g transform="translate(125, 125)">
<!-- inner SVG is scaled to fit 150x150 -->
<svg width="150" height="150" viewBox="0 0 1500 1000">
<!-- coordinate system inside the SVG is 0x0 <> 1500x1000 -->
<rect width="1500" height="1000" />
<text x="750" y="550" font-size="150">
Embedded SVG
</text>
</svg>
</g>
【讨论】：