码迷,mamicode.com
首页 > 其他好文 > 详细

svg的坐标系统

时间:2020-04-06 11:53:46      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:art   理解   xxxx   data-   标签   坐标   流程   one   reserve   

最近做一个流程图绘制项目,所以研究了一下svg。发现svg目前浏览器支持的挺强大的,但是svg本身有很多背景知识和元素属性以及js库等,如何系统地掌握这一强大工具呢?

viewPort(视窗)和viewBox(视野)

这两个词的翻译还是比较好的!你站在屋子里通过窗户来看外面的世界。窗户的大小是固定的,比如是400*200,可外面的世界是无限大的!那是不是你就只能看到窗户大小般的世界和井底之蛙一般呢?如果真是这样,那viewBox就没用了。想想看,如果你里窗户越远,是不是看到的越多呢?当你和窗户津贴成二维平面时,就真的是井底之蛙了。所以viewBox就很有意义了!

    <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的空白区域(窗户)。

  • 我们发现上面的宽高属性没有单位,所以默认是px.所以我们应该看到的是一块100px*100px的绿色正方形

技术图片

但是结果不是我们想要的

  • 首先html width,height属性如果没有单位就是px,svg是400*200,没有问题。

  • 但是里面的rect明明是100*100怎么就变成了200*200

结论

  • svg标签包裹的世界(代表是viewBox viewBox="0 0 200 50")和外部html(代表是viewPort width="400" height="200" )的世界不是一体的。

  • 如果上面的svg元素没有viewBox和preserveAspectRatio属性,那viewPort和viewBox的单位像素是1:1的,我们通过改变viewBox属性,改变两个世界的单位像素比例.

两个世界(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的宽高比不匹配的情况,它的值必须是以下其中一个

  1. xMinYMin

  2. xMidYMin

  3. xMaxYMin

  4. xMinYMid

  5. xMidYMid

  6. xMaxYMid

  7. xMinYMax

  8. xMidYMax

  9. xMaxYMax

啊,属性这么多!

但是我只要说一个,你就明白了!(不明白的话,在ViewBox演示

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

svg的坐标系统

标签:art   理解   xxxx   data-   标签   坐标   流程   one   reserve   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12640848.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!