设置 viewBox 属性如何影响用户坐标答案

【问题标题】：How does setting viewBox attribute, affects the user coordinates设置 viewBox 属性如何影响用户坐标
【发布时间】：2012-02-24 00:33:29
【问题描述】：

我有以下代码：http://jsfiddle.net/fCWJ5/1/，并且对视图框有以下疑问。

body{margin:0;}
#test{width:200px;height:200px;border:solid red 1px;}

<body>
    <div id="test">
        <!-- preserveAspectRatio="xMinYMin meet" -->
        <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150" 
        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
          <g>
            <rect class="drag resize" x="150" y="50" width="50" height="50" fill="#c66" />
          </g>
        </svg>
    </div>    
</body>

从小提琴一用户坐标 = .2，这是我通过除法得到的 200/1000（测试 div 宽度/viewBox 宽度属性）。根据这个，矩形应该在（30px，10px），宽度和高度分别为 10px、10px。但矩形在 (30px,97px), 宽度和高度为 10px,10px (有些高度根据计算，宽度是正确的。）。请指出为什么 y 坐标错误。
然后我给了 preserveAspectRatio="xMinYMin meet" 如 svg 中所说教程.pdf。对于这个值，它工作得很好。但对于其他值显示器去折腾。请解释这是什么。一世已经问过一个关于这个的问题 could not able to put viewbox,viewport,userspace together and get the picture。我无法理解答案和概念。
如果我没有指定任何宽度，比率的值是多少和 svg dom 元素容器的高度。
我看到比率为 1.3，（测试 div 的高度/高度 viewBox 的属性），未使用。应该用于计算诸如高度、y 坐标之类的东西。

【问题讨论】：

标签： svg

【解决方案1】：

问题是 DIV 的纵横比与 viewBox 的纵横比不匹配。所以 HTML 将你的 SVG 放在 DIV 的中心，上下都有空白区域。将以下内容添加到您的 SVG 代码中以进行说明：

<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>

这将显示您的 SVG 元素的边界，而您放置在 DIV 上的红色边框将显示它的边界。它们不匹配。

如果您没有在 SVG 元素上设置宽度或高度，那么它将填充其容器。在您的示例中，您将 DIV 设置为 200px X 200px，然后将应用 viewBox 有效地将 X 的 200px 除以 1000 个用户单位，Y 的 30px 除以 150（因为 SVG 的纵横比仅为 DIV 的 15%高度由 SVG 使用，200px 的 15% 是 30px）。从 DIV 中删除宽度和高度，它将使用屏幕的整个宽度。

如果您添加我的 rect 元素，您会看到您的盒子是从顶部向下延伸 1/3 的 1/3 (50/150 = 1/3)，同时也是 3/20 (150/1000 = 3/ 20) 从左侧向内延伸 1/20 (50/1000 = 1/20)。

【讨论】：

我认为您的回答只是部分正确。如果我错了，请更正。 “然后 viewBox 将有效地将 200px 除以 X 的 1000 个用户单位”是正确的。但是，“viewBox 将被有效地应用为 Y 将 200px 除以 150 个用户单位”是错误的。我认为应该是 Y 的 30px x 150。这 30px 来自哪里：200px/（svg 的纵横比）将给出 30px。所以这 30px 会被分成 150 个用户单元。
很好，你是对的！您的高度仅为宽度的 15%，因此仅使用 DIV 高度的 15%。因此 viewBox 会将 30px 除以 150 个用户单位。然后，DIV 将其高度的剩余 170px 平均分割为您的 SVG 元素上方和下方。