SVG viewBox 坐标答案

【问题标题】：SVG viewBox CoordinatesSVG viewBox 坐标
【发布时间】：2018-07-05 15:08:15
【问题描述】：

我只是在学习有关 SVG 视口和 viewBox 的详细信息。我感到困惑的是，这似乎违反直觉，尽管所有正 x 和 y 坐标在网页设计中分别从左到右和从上到下，但 viewBox 坐标系似乎分别从右到左和从下到上？

我理解正确吗，有人知道为什么会这样吗？

谢谢

【问题讨论】：

标签： svg viewbox

【解决方案1】：

这是不正确的。 viewBox 声明是 x, y, width, height。原点 0,0 在左上角 - 就像大多数坐标系一样。如果您有一个不同的示例，则可能是在您的文档或 CSS 的某个级别应用了正在改变行为的转换。

【讨论】：

嗨，Michael，这是一个链接，SVG 或 CSS 中没有转换。如果将 viewBox 的 x 和 y 值从 0 0 100 300 更改为 15 0 100 300，图形会向左移动，而不是向右移动。 codepen.io/emilychews/pen/qKGwwK
这是一个很长的解释。这是一个很好的总结：sarasoueidan.com/blog/svg-coordinate-systems
另外 - 玩弄这个来感受不同的 viewBox 和 preserveAspectRatio 设置如何影响定位codepen.io/mullany/pen/WyqGrm
@TheChewy 将 viewBox 概念化为在 SVG 画布上方的不透明层中定义一个透明窗口。更改 viewBox 属性时，您将“窗口”向右移动而不影响画布 - 因此您的图形相对于“窗口”向左移动。浏览器锚定了 viewBox 窗口，因此看起来坐标变化会影响图形。
一分钱现在掉了。因为您将 viewBox 向右和向下移动，所以会产生图形向左和向上移动的错觉。谢谢。

【解决方案2】：

一分钱现在掉了。因为您将 viewBox 向右和向下移动，所以会产生图形向左和向上移动的错觉。

【讨论】：