我努力理解究竟如何min-x,并min-y在viewBox作品中,从技术角度看(不含比喻).
我花了很多时间在两个有用的资源上:
根据SVG 1.1规范:
'viewBox'属性的值是一个由四个数字组成的列表,并用空格和/或逗号分隔,它们在用户空间中指定一个矩形,该矩形应该映射到由给定元素建立的视口的边界,考虑属性'preserveAspectRatio'.
和:
'viewBox'属性的作用是用户代理自动提供适当的变换矩阵,以将用户空间中的指定矩形映射到指定区域(通常是视口)的边界.
和:
(注意:在某些情况下,除了缩放转换之外,用户代理还需要提供转换转换.例如,在最外层的svg元素上,如果'viewBox'属性指定的值不是零,则需要转换转换.要么 .)
所以,我的期望是定义一个viewBox与:
min-x和min-yviewBox属性放置在视口中.如果我们看看Sara的两个例子,从这里开始,那不是正在发生的事情.
在她的第一个例子(<svg width="800" height="600" viewbox="100 100 200 150">...</svg>)中,它看起来像:
min-x/ min-y在视口中放置在她的第二个例子中(<svg width="800" height="600" viewbox="-100 -100 400 300">...</svg>),它看起来像一个完全不同的顺序:
min-x min-y指示的方向相反.它与视口原点不一致 - …svg ×1