时间戳

首页 > 解决方案 > 在没有inkscape的情况下缩放svg内容以适应页面大小（反之亦然）

svg - 在没有inkscape的情况下缩放svg内容以适应页面大小（反之亦然）

问题描述

我想缩放 SVG 图像以适应页面大小（反之亦然：裁剪页面以适应内容）。这可以使用这里描述的 inkscape 来完成。但是，如果没有 gui，似乎没有办法做到这一点。通过命令行使用动作和动词总是需要 GUI。有没有另一种存档方式？

标签： svggraphicscropscaling

解决方案

你的问题不是很清楚你想具体问什么，如果你愿意，我正在回答

缩放 Svg 以适应 HTML 文档中的页面大小

如果您将 SVG 的 viewBox 属性更改为与图像的高度和宽度比不同的比例，那么 SVG 将不适合页面，因为默认情况下，有一个<svg>名为标签的属性默认PreserveAspactRatio设置为meet。您必须将此属性更改为剪辑，以便 SVG 填充整个视口。

如果您定义的纵横比与 SVG 的高宽比不同，图像会变形，但它仍会填满页面。

只需在标签中添加此代码即可。

preserveAspectRatio = "xMinYMin slice"

切片之前可以有不同的参数，即

none

不要强制统一缩放。如有必要，非均匀地缩放给定元素的图形内容（不保留纵横比），以使元素的边界框与视口矩形完全匹配。

xMinYMin

强制统一缩放。将元素的 viewBox 与视口的最小 X 值对齐。将元素的 viewBox 与视口的最小 Y 值对齐。

xMinYMid

强制统一缩放。将元素的 viewBox 与视口的最小 X 值对齐。将元素 viewBox 的中点 Y 值与视口的中点 Y 值对齐。

xMaxYMax

强制统一缩放。将元素 viewBox 的 + 与视口的最大 X 值对齐。将元素 viewBox 的 + 与视口的最大 Y 值对齐。ETC..

有关更多详细信息，如果您的问题与 Web 相关，您可以参考这篇文章。

推荐阅读