zoukankan      html  css  js  c++  java
  • svg的世界、视窗、视野

    刚学svg时 看视频有人说了视窗和视野两个概念。学移动端时,又听说过视口这个概念。感觉还是有点绕的。以此博客来整理记录我查的资料。

    1.世界

      就是说svg的世界其实可以无限大,你想让它多大就多大,你可以在上面画很多东西。但是不是世界上所有的东西都能被页面看到,

    2.视野

    能被页面看到的部分是视野。视野可以移动。如上图,视野目前看到的是那个小绿块,但不是说只有svg只有这么大,你可以设置视野让他移动到小紫块那里,那样页面看到的就是小紫块。

    viewbox有四个属性,x,y,width,height。 x,y决定了视野左上角的位置。width和height是宽高。这里宽高只代表viewbox和svg本身的width,height概念不同。

    3.视窗

    视窗其实浏览器开辟出来的,在svg里就是svg自己的宽和高。这个宽高可以用样式去控制。

    具体来说,这里的width,height 就是视窗大小,里面的400,300是视野

    现在视野和视窗的宽高比是一致的。

    如果它们不一致显示效果要有preserveAspectRation来决定是缩小显示还是只显示其中一部分。

     按照上图代码这种情况 svg内部的rect函数如果宽为1 那么代表的实际像素就是2px.

    所以svg的宽高怎么变 只会影响显示部分的大小,但是因为svg内部用的都是自己的坐标系,所以永远都不会变形也不会失真。

    最后说一点 无关svg的

          视口(viewport)用于移动端自适应。

          使用语法:

                <meta id="viewPort" name="viewPort" content="width=device-width;initial-scale=1.0;maxinum-scale=1;user-scalble=no;">

  • 相关阅读:
    shell编程-基础
    磁盘管理-下部
    磁盘管理-中部
    磁盘管理-上部
    用户的管理
    docker之阿里云centos 7.x 启动容器报错处理办法
    IDEA之整合SVN遇到的坑(一)
    springboot之通过idea打jar包并运行
    SpringBoot整合定时任务和异步任务处理
    Microsoft SQL Server 2012安装说明
  • 原文地址:https://www.cnblogs.com/ada-blog/p/9129946.html
Copyright © 2011-2022 走看看