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

问题描述 投票：2回答：1

我有以下代码：http://jsfiddle.net/fCWJ5/1/，以及对viewbox的疑虑。

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>
  1. 从小提琴一个用户坐标= .2，这是我通过划分200/1000（测试div宽度/ viewBox宽度属性）得到的。据此，矩形应为（30px，10px），宽度和高度分别为10px，10px。但是矩形是（30px，97px），宽度和高度分别为10px，10px（根据计算，高度和宽度的高度是正确的）。请指出y坐标错误的原因。
  2. 然后我按照svg教程pdf中的说法给了preserveAspectRatio =“xMinYMin meet”。它对这个值很好。但是对于其他价值，显示器会折腾。请解释这是什么。我已经问了一个关于这个could not able to put viewbox,viewport,userspace together and get the picture的问题。我无法理解答案和概念。
  3. 如果我没有为svg dom元素容器指定任何宽度和高度，那么该比率的值是多少。
  4. 我看到没有使用比率1.3，（viewBox的测试div / height属性的高度）。应该用于计算高度，y坐标等事物。
svg
1个回答
2
投票

问题是您的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）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.