如何在另一个SVG文件中居中并缩放SVG文件

我正在开发一个程序，可以根据用户的选择生成svg文件。其中一个选择是在第一个特定点上包含另一个svg文件。第二个文件具有未知的宽高比和大小，但它应该按比例缩放到特定的最大大小，不管是作为高度还是宽度，并且应该集中在一个特定点上。我现在使用的方法是使用包含所包含图像的SVG标签的G标签，并对G标签执行转换以进行缩放和平移。有没有什么办法可以在不知道图像大小的情况下执行缩放以获取特定尺寸？有什么办法让翻译的坐标适用于图像的中心而不是左上角？我对SVG很新，所以可能是我以错误的方式去解决这个问题。有没有更好的方法来获得相同的结果？如何在另一个SVG文件中居中并缩放SVG文件

来源

2009-09-23 Niko

这是一个耻辱有没有答案这个问题，可能是它应该是更具体的或者重新标记？ – Parsa 2010-01-31 18:21:13

我想你想先有其他SVG文件隐藏，呼叫.getBBox()在JavaScript 做一些简单的计算，设置相应的参数，取消隐藏

来源

2010-08-15 13:15:22 stelt

我明白你的意思，或者至少我认为。在我的脑海里没有更好的想法来做到这一点，而不是分组。对我而言，<g>是使用SVG文档的一个片段进行操作的最佳方式。但在我看来，将<rect>元素视为您的视觉数据的容器。也许那么<g>就没有必要，取决于你的编码要求。

如果你需要把只有简单的SVG图像，你可以不喜欢它：

<image id="yourSVGImage" xlink:href="yourImg.svg" 
     x="24px" y="50px" width="527px" height="328px" 
      preserveAspectRatio="XMinYMin meet"/>

如果你表达“宽度”和固定单位“高度”（如像素），你会达到什么我”我认为你需要。如果你需要的话，还有“preserveAspectRatio”来看看这个属性。

来源

2012-01-02 09:43:54 Alex

编辑：这个答案stil要求你知道内部SVG的大小。最分开的方法是在浏览器端使用getBBox()方法，可能使用visibility或display来防止用户看到未缩放的图形。 jsFiddle example已更新为使用此方法。

对于缩放，请使用viewBox attribute。从W3C的文档：

通常需要指定给定的一组图形拉伸以适应特定的容器元素。 'viewBox'属性提供了这个功能。

所有建立新视口（参见elements that establish viewports）的元素都具有属性'viewBox'。 'viewBox'属性的值是一个包含四个数字的列表<min-x>,<min-y>,0 <width>和<height>，...，它们在用户空间中指定一个矩形，该矩形应映射到由给定元素建立的视口的边界，帐户attribute ‘preserveAspectRatio’。

Example ViewBox说明了在最外面的svg元素上使用'viewBox'属性来指定SVG内容应该伸展以适应视口边界。

上面的示例将preserveAspectRadio指定为none，因此嵌入式SVG会精确地适应容器SVG。默认值preserveAspectRadio，即xMidYMid meet，应该符合您的需求。该属性允许您对how to scale and position the enclosed graphics进行细化控制。

将内部SVG缩放到已知大小（viewBox）后，居中应该是一个简单的计算问题，并正确使用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>

来源

2012-04-02 16:29:44 ento

如何在另一个SVG文件中居中并缩放SVG文件

回答

相关问题