Question

我有以下代码：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宽度/视图框宽度属性）。根据这个矩形应该是（30px，10px），宽度和高度分别为10px，10px。但矩形是在（30px，97px），宽度和高度为10px，10px（有些高度如何并且根据计算宽度是正确的。）。请指出为什么 y坐标错了。
然后我按照svg中的说法给了preserveAspectRatio =“xMinYMin meet” 教程pdf。它对这个值很好。但对于其他人价值显示器折腾。请解释这是什么。一世已经问过这个问题 could not able to put viewbox,viewport,userspace together and get the picture。我无法理解答案和概念。
如果我没有指定任何宽度，那么比率的值是多少和svg dom元素容器的高度。
我看到比率为1.3，（测试格的高度/高度不使用viewBox的属性。应该用于计算高度，y坐标等事情。

Answer 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分为150px，150（因为SVG的宽高比仅为DIV的15％） SVG使用高度，200px的15％是30px）。从DIV中移除宽度和高度，它将使用屏幕的整个宽度。

如果你添加我的矩形元素，你会看到你的盒子从顶部延伸1/3向下是1/3（50/150 = 1/3），同时也是3/20（150/1000 = 3 / 20）从左边开始并延伸1/20（50/1000 = 1/20）。

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

1 个答案: