svg的坐标系统

时间 2019-12-07

标签 svg 坐标系统繁體版

原文原文链接

最近作一个流程图绘制项目，因此研究了一下svg。发现svg目前浏览器支持的挺强大的，可是svg自己有不少背景知识和元素属性以及js库等，如何系统地掌握这一强大工具呢？css

viewPort(视窗)和viewBox(视野)

这两个词的翻译仍是比较好的！你站在屋子里经过窗户来看外面的世界。窗户的大小是固定的，好比是400*200,可外面的世界是无限大的！那是否是你就只能看到窗户大小般的世界和井底之蛙通常呢？若是真是这样，那viewBox就没用了。想一想看，若是你里窗户越远，是否是看到的越多呢？当你和窗户津贴成二维平面时，就真的是井底之蛙了。因此viewBox就颇有意义了！html

<svg width="400" height="200" viewBox="0 0 200 50"  preserveAspectRatio='xMidYMin' style="border:1px solid greenyellow">
        <rect fill="#00ff00" width='100' height="100" x="0" y="0"></rect>
    </svg>

svg是html标签，相似于canvas，表明上面所说的viewPort.这里浏览器会渲染一块400*200的空白区域（窗户）。canvas
咱们发现上面的宽高属性没有单位，因此默认是px.因此咱们应该看到的是一块100px*100px的绿色正方形浏览器

可是结果不是咱们想要的svg

首先html width,height属性若是没有单位就是px,svg是400*200，没有问题。工具
可是里面的rect明明是100*100怎么就变成了200*200spa

结论翻译

svg标签包裹的世界（表明是viewBox viewBox="0 0 200 50"）和外部html（表明是viewPort width="400" height="200" ）的世界不是一体的。3d
若是上面的svg元素没有viewBox和preserveAspectRatio属性，那viewPort和viewBox的单位像素是1：1的，咱们经过改变viewBox属性，改变两个世界的单位像素比例.code

两个世界(viewPort和viewBox)的单位像素

怎么理解两个世界

demo: 1.html

<body>
    <div>
        <svg width='200px' height="200px">
            <polygon id='star' points='100,0 0,100 100,200 200,100' fill="none" stroke='black'/>
        </polygon>
            </polygon>
        </svg>
    </div>
</body>
</html>

上面是HTML的世界，在这个世界里，咱们能够经过使用css改变和定位svg(viewPort)，这里viewPort就定义成了300*300,表明着svg在HTML世界中只能占据300*300的空间。
难道我在svg中画图只能画限制在300*300空间的图吗？不可能，事实上我能够画无穷大，上面的polygon能够设置成更大。这个无穷大的空间就是svg世界
若是这样的话，由于默认两个世界的比例是1：1，因此你会看不到全部部分。

<polygon id='star' points='100,0 0,200 100,400 200,200' fill="none" stroke='black'/>

preserveAspectRatio属性

ViewBox属性和preserveAspectRatio属性配合使用。

viewBox

<svg width='200px' height="200px" viewBox="0 0 400 400">
        <!-- <polygon id='star' points='100,0 0,100 100,200 200,100' fill="none" stroke='black'/> -->
        <polygon id='star' points='100,0 0,200 100,400 200,200' fill="none" stroke='black'/>
        <text x='60' y='160' style="font-size:16">svg:200*200</text>
    </svg>

若是viewBox width和height等比例缩放的话，这个图形会相应缩放。

若是width和height不是等比例呢，这时，preserveAspectRatio属性就起做用了.

preserveAspectRatio包含两部分：

align
meetOrSlice

这两个使用请参考这个例子[ViewBox演示]()

在viewBox的宽高比和viewport的宽高比不匹配的状况，它的值必须是如下其中一个

xMinYMin
xMidYMin
xMaxYMin
xMinYMid
xMidYMid
xMaxYMid
xMinYMax
xMidYMax
xMaxYMax

啊,属性这么多！

可是我只要说一个，你就明白了！(不明白的话，在ViewBox演示

xMinYMin 强制等比例缩放，viewBox的min-x坐标值和viewport的最左边的x对齐。viewBox的min-y坐标和viewport的最左边的y坐标对齐,