Question

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

Answer 1

我猜你想先隐藏其他SVG文件，在JavaScript中调用.getBBox() 做一些简单的计算，设置适当的参数，取消隐藏

Answer 2

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

如果您只需要放置简单的SVG图像，可以这样做：

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

如果以固定单位（例如像素）表示“宽度”和“高度”，您将实现我认为您需要的东西。如果需要，还可以使用“preserveAspectRatio”来查看此属性。

Answer 3

编辑：这个答案stil要求您知道内部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>

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

3 个答案: