svg viewbox缩放问题答案

【问题标题】：svg viewbox scaling issuesvg viewbox缩放问题
【发布时间】：2012-02-09 17:19:56
【问题描述】：

我有一个关于 svg 的 viewbox 的问题，在我看来它就像一个无限 svg 计划的窗口，它的边界是在 svg 元素的 viewBox 属性中设置的。它表示 svg 计划中 2 个坐标之间的矩形。因此，“0 0 1000 500”的 viewBox 显示了 svg 计划的 (0,0) 和 (1000,500) 之间的窗口。当我制作 viewBox (2000, 0, 3000 500) 时，我看到了 (2000,0) 和 (3000,500) 的窗口。 x 和 y 缩放未修改：在这两种情况下，我都显示 1000 * 500 单位的 svg 计划。

但显然我在某些地方出错了。我正在尝试对视图框进行动画处理以模拟某种股票显示，保持 y 坐标不变，但更改 x 坐标（不更改显示的实际单位数），但这会出错。不知何故，我的 y 缩放发生了变化。在现代浏览器中，您可以验证yourself（拉动滑块以更改视图框）。我在 SVG 规范中遗漏了什么？

【问题讨论】：

视图框设置为“min-x min-y width height”而不是“min-x min-y max-x max-y”

标签： svg coordinates viewbox

【解决方案1】：

您错过了 SVG 规范中的 preserveAspectRatio 属性。默认情况下，它会强制保留您在视图框中看到的内容的纵横比。听起来你想要的是 preserveAspectRatio="none"

【讨论】：

嗯，所有可能的值都没有给我想要的结果。我想我想要 xMidYNone 之类的东西。使用“none”时，y 缩放是可以的，但 x 缩放非常错误。我可以通过动画路径的起点来解决它，但我有点好奇通过视图框来解决它。