直接运行此例子

深入理解svg的viewport、viewbox、preserveaspectradio实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="author" content="李可">
  7.     <title>svgviewBox的特写过程。演示动画</title>
  8.     <style>
  9.         div {
  10.             box-sizing: border-box;
  11.         }
  13.         span {
  14.             font-weight: bolder;
  15.         }
  16.     </style>
  17. </head>
  19. <body>
  20.     <fieldset style="width:800px;">
  21.         <legend>
  22.             <h2>viewport,viewBox,preserveAspectRatio演示-李可</h2>
  23.         </legend>
  24.         <h4>viewport: </h4>
  25.         <label for="viewportWidthNumber">width:</label>
  26.         <input type="number" id='viewportWidthNumber' value="400" oninput="updateView('#svg','width',this.value)" />
  27.         <label for="viewportHeightNumber">height:</label>
  28.         <input type="number" id='viewportHeightNumber' value="300" oninput="updateView('#svg','height',this.value)" />
  29.         <h4>viewBox: </h4>
  30.         <label for="viewBoxWidthNumber">width:</label>
  31.         <input type="number" id='viewBoxWidthNumber' value="40" oninput="updateView('#react','width',this.value)" />
  32.         <label for="viewBoxHeightNumber">height:</label>
  33.         <input type="number" id='viewBoxHeightNumber' value="30" oninput="updateView('#react','height',this.value)" />
  34.         <h4>preserveAspectRatio（align，meetOrSlice）</h4>
  35.         <select name="align" id="align" onchange="preserveAspectRadioFirst(this.value)">
  36.                 <option value="none">none</option>
  37.                 <option value="xMinYMin">xMinYMin</option>
  38.                 <option value="xMinYMid">xMinYMid</option>
  39.                 <option value="xMinYMax">xMinYMax</option>
  40.                 <option value="xMidYMin">xMidYMin</option>
  41.                 <option value="xMidYMid" selected>xMidYMid</option>
  42.                 <option value="xMidYMax">xMidYMax</option>
  43.                 <option value="xMaxYMin">xMaxYMin</option>
  44.                 <option value="xMaxYMid">xMaxYMid</option>
  45.                 <option value="xMaxYMax">xMaxYMax</option>
  46.         </select>
  47.         <select name="meetOrSlice" id="meetOrSlice">
  48.                 <option value="meet" selected>meet</option>
  49.                 <option value="slice">slice</option>
  50.         </select>
  51.         <p>viewBox，默认 0 0 width height</p>
  52.         <p>preserverAspectRadio，默认xMidYMid meet,如果align是none，meetOrSlice的值将会被忽略</p>
  53.         <div id="note" style="visibility:hidden;">
  54.             <p>按照---><span id="direction"></span>，缩放 ---> <span id="percent"></span>倍</p>
  55.         </div>
  56.         <button type="button" id="btn">运动动画</button>
  57.     </fieldset>
  58.     <div id="svg" style="margin:100px 0 0 100px;position:relative;width:400px;height:300px; background:gray;">vport
  59.         <div id="react" style="position:absolute;width:40px;height:30px;background:green;">vBox
  60.             <div id="realDiv" style="position:absolute;top:0;left:0;opacity:0.5;margin:10% 0 0 15%;width:30%;height:50%;background:red;"></div>
  61.         </div>
  62.     </div>
  63.     <script>
  64.         let updateView = (selector, attr, val) => {
  65.             document.querySelector(selector).style[attr] = val + 'px';
  66.             preserveAspectRadioFirst(align.value)
  67.         }
  69.         let preserveAspectRadioFirst = (startPosition = 'xMidYMid') => {
  70.             const svgW = viewportWidthNumber.value;
  71.             const svgH = viewportHeightNumber.value;
  72.             const reactW = viewBoxWidthNumber.value;
  73.             const reactH = viewBoxHeightNumber.value;
  74.             switch (align.value) {
  75.                 case 'none':
  76.                     react.style.transformOrigin = 'center center';
  77.                     react.style.left = (svgW - reactW) / 2 + 'px';
  78.                     react.style.top = (svgH - reactH) / 2 + 'px';
  79.                     break;
  80.                 case 'xMinYMin':
  81.                     react.style.transformOrigin = 'left top';
  82.                     react.style.left = 0 + 'px';
  83.                     react.style.top = 0 + 'px';
  84.                     break;
  85.                 case 'xMinYMid':
  86.                     react.style.transformOrigin = 'left center';
  87.                     react.style.left = 0 + 'px';
  88.                     react.style.top = (svgH - reactH) / 2 + 'px';
  89.                     break;
  90.                 case 'xMinYMax':
  91.                     react.style.transformOrigin = 'left bottom';
  92.                     react.style.left = 0 + 'px';
  93.                     react.style.top = (svgH - reactH) + 'px';
  94.                     break;
  95.                 case 'xMidYMin':
  96.                     react.style.transformOrigin = 'center center';
  97.                     react.style.left = (svgW - reactW) / 2 + 'px';
  98.                     react.style.top = 0 + 'px';
  99.                     break;
  100.                 case 'xMidYMid':
  101.                     react.style.transformOrigin = 'center center';
  102.                     react.style.left = (svgW - reactW) / 2 + 'px';
  103.                     react.style.top = (svgH - reactH) / 2 + 'px';
  104.                     break;
  105.                 case 'xMidYMax':
  106.                     react.style.transformOrigin = 'center bottom';
  107.                     react.style.left = (svgW - reactW) / 2 + 'px';
  108.                     react.style.top = (svgH - reactH) + 'px';
  109.                     break;
  110.                 case 'xMaxYMin':
  111.                     react.style.transformOrigin = 'right top';
  112.                     react.style.left = (svgW - reactW) + 'px';
  113.                     react.style.top = 0 + 'px';
  114.                     break;
  115.                 case 'xMaxYMid':
  116.                     react.style.transformOrigin = 'right center';
  117.                     react.style.left = (svgW - reactW) + 'px';
  118.                     react.style.top = (svgH - reactH) / 2 + 'px';
  119.                     break;
  120.                 case 'xMaxYMax':
  121.                     react.style.transformOrigin = 'right bottom';
  122.                     react.style.left = (svgW - reactW) + 'px';
  123.                     react.style.top = (svgH - reactH) + 'px';
  124.                     break;
  125.             }
  126.         }
  127.         preserveAspectRadioFirst(align.value);
  129.         let awaitFn = () => {
  130.             return new Promise((resolve, reject) => {
  131.                 setTimeout(() => {
  132.                     react.style.transitionDuration = '0s';
  133.                     resolve()
  134.                 })
  135.             })
  136.         }
  137.         let inputs = document.querySelectorAll('input');
  138.         let selects = document.querySelectorAll('select');
  140.         let disableEle = () => {
  141.             for (let i = 0; i < inputs.length; i++) {
  142.                 inputs[i].setAttribute('disabled', 'disabled')
  143.             }
  144.             for (let i = 0; i < selects.length; i++) {
  145.                 selects[i].setAttribute('disabled', 'disabled')
  146.             }
  147.         }
  148.         let enbledEle = () => {
  149.             for (let i = 0; i < inputs.length; i++) {
  150.                 inputs[i].removeAttribute('disabled')
  151.             }
  152.             for (let i = 0; i < selects.length; i++) {
  153.                 selects[i].removeAttribute('disabled')
  154.             }
  155.         }
  157.         let step = 1;
  158.         btn.addEventListener('click', async e => {
  159.             if (step % 2) {
  160.                 btn.innerHTML = '初始化'
  161.                 disableEle();
  162.                 react.style.transition = "transform 5s";
  164.                 const svgW = viewportWidthNumber.value;
  165.                 const svgH = viewportHeightNumber.value;
  166.                 const reactW = viewBoxWidthNumber.value;
  167.                 const reactH = viewBoxHeightNumber.value;
  168.                 svg.style.width = svgW + 'px';
  169.                 svg.style.height = svgH + 'px';
  170.                 react.style.width = reactW + 'px';
  171.                 react.style.height = reactH + 'px';
  173.                 let p = (reactW / reactH) / (svgW / svgH) > 1;//p>1,viewbox宽先到viewport的宽 p<1,viewbox高先到viewport的高
  174.                 let s = meetOrSlice.value;
  175.                 let scaleX = svgW / reactW;
  176.                 let scaleY = svgH / reactH;
  177.                 let scale = p ?
  178.                     s == 'meet' ? scaleX : scaleY :
  179.                     s == 'meet' ? scaleY : scaleX;
  181.                 //note
  182.                 let derector = p ?
  183.                     s == 'meet' ? 'x轴' : 'y轴' :
  184.                     s == 'meet' ? 'y轴' : 'x轴';
  185.                 percent.innerHTML = scale;
  186.                 direction.innerHTML = derector;
  187.                 note.style.visibility = 'visible';
  188.                 //note
  190.                 react.style.transform = "scale(" + scale + ")";
  191.             } else {
  192.                 note.style.visibility = 'hidden';
  193.                 enbledEle()
  194.                 await awaitFn()
  195.                 react.style.transform = 'scale(1)'
  196.                 react.style.background = 'green'
  197.                 btn.innerHTML = '运动动画'
  198.             }
  199.             step++;
  200.         })
  202.         react.addEventListener('transitionend', e => {
  203.             if (e.propertyName == 'transform') {
  204.                 react.style.transition = "background 5s";
  205.                 react.style.background = 'transparent';
  206.             }
  207.         });
  208.     </script>
  209. </body>
  211. </html>

运行例子

viewport的理解

例子

这里的viewport的宽高就是svg标签里面的width和height属性值。默认单位像素px，这里也就是400px*300px,当然可以用其他单位em rem %等等，前提你用得着~哦。然后svg的viewport就讲完了，简单吧。

  1. <svg width="400" height="300"  style="border:1px solid red">
  2.     <rect width="40" height="30" fill="green"/>
  3. </svg>

运行图片

viewBox

重点理解，绝对不要放过的地方哦

例子1

viewBox="x y width height" 或者viewBox="x ,y,width,height" 带不带 逗号

x:初始矩形的左上点x坐标

y:初始矩形左上角y坐标

width:初始矩形宽度

height:初始矩形高度

我画三个图形，跟我先弄懂这三个

  1. <svg width="400" height="300"  style="border:1px solid red">
  2.         <rect width="40" height="30" />
  3. </svg>
  4. <svg width="400" height="300" viewBox="0 0 40 30"  style="border:1px solid red">
  5.         <rect width="40" height="30" />
  6. </svg><br/>
  7. <svg width="400" height="300" viewBox="0 0 80 30"  style="border:1px solid red">
  8.         <rect width="40" height="30" />
  9. </svg>

运行图片

可视化svg深入理解viewport、viewbox、preserveaspectradio的更多相关文章

  1. SVG 入门——理解viewport,viewbox,preserveAspectRatio

    工欲善其事必先利其器,没有真正搞懂SVG里的viewport,viewbox, preserveAspectRatio这三个属性,就很容易遇到坑,最近写项目用到svg这三个属性被我一眼就略过 ,后来发 ...

  2. 理解SVG中的 viewport，viewBox, preserveAspectRatio

    _ 阅读目录 一:理解viewport 二:理解viewBox 三:理解 preserveAspectRatio 回到顶部 一:理解viewport 该属性表示的是SVG可见区域的大小.或者也可以叫画 ...

  3. 数据可视化-svg入门基础（二）

    接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等. svg是(scalable vector graphic)伸缩矢量图像. 一.目录 (1)图形元素 (2)文 ...

  4. 理解SVG的viewport,viewBox,preserveAspectRatio

    万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...

  5. 深入理解viewport（转）

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  6. 深入理解viewport

    这篇文章我已写成pdf,建议直接下载浏览. 链接:https://pan.baidu.com/s/1c4cwd7E 密码:jty1 <对viewport标签的理解> --版权所有 @RYZ ...

  7. 『cs231n』卷积神经网络的可视化与进一步理解

    cs231n的第18课理解起来很吃力,听后又查了一些资料才算是勉强弄懂,所以这里贴一篇博文(根据自己理解有所修改)和原论文的翻译加深加深理解,其中原论文翻译比博文更容易理解,但是太长,而博文是业者而非 ...

  8. HTML-HTML5+CSS3权威指南阅读（五、深入理解viewport）

    1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小 ...

  9. 通透理解viewport

    摘自:https://blog.csdn.net/u014787301/article/details/44466697 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewpor ...

随机推荐

  1. [随笔][胡思乱想][唠叨][web server]

    nginx是一个webserver,最基本的功能是发送静态的文件.类似于apache2的webserver,主要的功能就是响应请求,做出响应. 所说的服务器是安装了服务器软件的物理机,专用的服务器或者 ...

  2. IDEA 代码生成插件 CodeMaker

    Java 开发过程中经常会遇到编写重复代码的事情,例如说:编写领域类和持久类的时候,大部分时候它们的变量名称,类型是一样的,在编写领域类的时候常常要重复写类似的代码.类似的问题太多……这里介绍一个 I ...

  3. java安装与配置

    参考:https://blog.csdn.net/gaokao2011/article/details/75211429 Win 1.JDK JDK 可以到官网下载http://www.oracle. ...

  4. laravel Cache store [] is not defined

    去这个网站学习一下也好  https://laravel-china.org/topics/2093/laravel-source-analysis-series-cache#0b2791 如果env ...

  5. winform 打印时的默认单位

    通过设置Graphics.PageUnit,是枚举类型GraphicsUnit,默认是display(指定显示设备的度量单位. 通常,视频显示使用的单位是像素:打印机使用的单位是 1/100 英寸.)

  6. 使用doxc4j将word转pdf遇到的一个问题

    看到网上很多使用Docx4j将word转成pdf,于是cv工程师就开始了一系列复制粘贴操作,但是运行报错 最后经过修改

  7. java大数据量调优

    从总体上来看,对于大型网站,比如门户网站,在面对大量用户访问.高并发请求方面,基本的解决方案集中在这样几个环节:1.首先需要解决网络带宽和Web请求的高并发,需要合理的加大服务器和带宽的投入,并且需要 ...

  8. kong api可视化管理工具konga安装

    说明:官网推荐: kong-dashboard,但对比界面高端程度和友好度,更推荐konga.[一个坑]kong版本问题:我在安装时目前kong最新版本已经到1.0.0, 对于konga和kong-d ...

  9. 激活WINDOWS SERVER 2019

    Windows Server 2019 Datacenter WMDGN-G9PQG-XVVXX-R3X43-63DFGWindows Server 2019 Standard N69G4-B89J2 ...

  10. Zookeeper并不保证读取的是最新数据

    Zookeeper并不保证读取的是最新数据 原文地址:http://www.crazyant.net/2120.html 如果是对zk进行读取操作,读取到的数据可能是过期的旧数据,不是最新的数据. 已 ...