SVG 输出被拉伸

Question

以下 link 中的 SVG 文件以错误的方式水平拉伸：

http://isometricland.net/svg/openworld_sandbox_nonlinear_venndiagram_bugreport.svg

我想知道是否有一种通过编辑源代码来快速修复文件的方法？

不幸的是，我用来创建文件的软件 GeoGebra 的开发人员在修复错误时速度很慢，我很着急。我将不胜感激任何帮助。谢谢

[编辑]

大致如下所示。

Answer 1

将根 <svg> 元素中的 viewBox 属性更改为以下内容。

viewBox="0 0 1605 887"

您可能还想将 width 和 height 属性更改为更合适的内容。使用

width="100%" height="100%"

如果你想让它适合父 <div> 之类的东西。或者，如果需要，请指定确切的尺寸。不过，请确保使用具有相同纵横比 (1615/897) 的宽度和高度。

更新

选项1：要使其显示为正方形，需要像上面那样更改viewBox，还要更改preserveAspectRatio设置。对根 <svg> 元素进行以下更改。

viewBox="0 0 1605 887"
preserveAspectRatio="none"

由于宽度和高度设置为“60cm”，图表仍然会很大。如果你想要它更小，只需将它们更改为更合适的东西 - 例如。 “600 像素”。或者，如果您愿意，可以像上面那样将它们设置为“100%”，然后将它们放在正方形 <div>.

中

选项 2： 或者作为上述方法的替代方法，您可以将 transform 添加到第一个 <g> 元素（包裹整个图表).

<g stroke-linejoin="miter" stroke-dashoffset="0.0000" stroke-dasharray="none"
   stroke-width="1.0000" stroke-miterlimit="10.000" stroke-linecap="square"
   transform="scale(0.474 0.858)">

此转换等效于上面更改的 viewBox 引起的隐式转换。

选项 1 中有关更改宽度和高度的注释也适用于此。

SVG 输出被拉伸

SVG output is stretched

svg

geogebra