直接运行此例子

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="author" content="李可">

    <title>svgviewBox的特写过程。演示动画</title>

    <style>

        div {

            box-sizing: border-box;

        }

        span {

            font-weight: bolder;

        }

    </style>

</head>

<body>

    <fieldset style="width:800px;">

        <legend>

            <h2>viewport,viewBox,preserveAspectRatio演示-李可</h2>

        </legend>

        <h4>viewport: </h4>

        <label for="viewportWidthNumber">width:</label>

        <input type="number" id='viewportWidthNumber' value="400" oninput="updateView('#svg','width',this.value)" />

        <label for="viewportHeightNumber">height:</label>

        <input type="number" id='viewportHeightNumber' value="300" oninput="updateView('#svg','height',this.value)" />

        <h4>viewBox: </h4>

        <label for="viewBoxWidthNumber">width:</label>

        <input type="number" id='viewBoxWidthNumber' value="40" oninput="updateView('#react','width',this.value)" />

        <label for="viewBoxHeightNumber">height:</label>

        <input type="number" id='viewBoxHeightNumber' value="30" oninput="updateView('#react','height',this.value)" />

        <h4>preserveAspectRatio（align，meetOrSlice）</h4>

        <select name="align" id="align" onchange="preserveAspectRadioFirst(this.value)">

                <option value="none">none</option>

                <option value="xMinYMin">xMinYMin</option>

                <option value="xMinYMid">xMinYMid</option>

                <option value="xMinYMax">xMinYMax</option>

                <option value="xMidYMin">xMidYMin</option>

                <option value="xMidYMid" selected>xMidYMid</option>

                <option value="xMidYMax">xMidYMax</option>

                <option value="xMaxYMin">xMaxYMin</option>

                <option value="xMaxYMid">xMaxYMid</option>

                <option value="xMaxYMax">xMaxYMax</option>

        </select>

        <select name="meetOrSlice" id="meetOrSlice">

                <option value="meet" selected>meet</option>

                <option value="slice">slice</option>

        </select>

        <p>viewBox，默认 0 0 width height</p>

        <p>preserverAspectRadio，默认xMidYMid meet,如果align是none，meetOrSlice的值将会被忽略</p>

        <div id="note" style="visibility:hidden;">

            <p>按照---><span id="direction"></span>，缩放 ---> <span id="percent"></span>倍</p>

        </div>

        <button type="button" id="btn">运动动画</button>

    </fieldset>

    <div id="svg" style="margin:100px 0 0 100px;position:relative;width:400px;height:300px; background:gray;">vport

        <div id="react" style="position:absolute;width:40px;height:30px;background:green;">vBox

            <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>

        </div>

    </div>

    <script>

        let updateView = (selector, attr, val) => {

            document.querySelector(selector).style[attr] = val + 'px';

            preserveAspectRadioFirst(align.value)

        }

        let preserveAspectRadioFirst = (startPosition = 'xMidYMid') => {

            const svgW = viewportWidthNumber.value;

            const svgH = viewportHeightNumber.value;

            const reactW = viewBoxWidthNumber.value;

            const reactH = viewBoxHeightNumber.value;

            switch (align.value) {

                case 'none':

                    react.style.transformOrigin = 'center center';

                    react.style.left = (svgW - reactW) / 2 + 'px';

                    react.style.top = (svgH - reactH) / 2 + 'px';

                    break;

                case 'xMinYMin':

                    react.style.transformOrigin = 'left top';

                    react.style.left = 0 + 'px';

                    react.style.top = 0 + 'px';

                    break;

                case 'xMinYMid':

                    react.style.transformOrigin = 'left center';

                    react.style.left = 0 + 'px';

                    react.style.top = (svgH - reactH) / 2 + 'px';

                    break;

                case 'xMinYMax':

                    react.style.transformOrigin = 'left bottom';

                    react.style.left = 0 + 'px';

                    react.style.top = (svgH - reactH) + 'px';

                    break;

                case 'xMidYMin':

                    react.style.transformOrigin = 'center center';

                    react.style.left = (svgW - reactW) / 2 + 'px';

                    react.style.top = 0 + 'px';

                    break;

                case 'xMidYMid':

                    react.style.transformOrigin = 'center center';

                    react.style.left = (svgW - reactW) / 2 + 'px';

                    react.style.top = (svgH - reactH) / 2 + 'px';

                    break;

                case 'xMidYMax':

                    react.style.transformOrigin = 'center bottom';

                    react.style.left = (svgW - reactW) / 2 + 'px';

                    react.style.top = (svgH - reactH) + 'px';

                    break;

                case 'xMaxYMin':

                    react.style.transformOrigin = 'right top';

                    react.style.left = (svgW - reactW) + 'px';

                    react.style.top = 0 + 'px';

                    break;

                case 'xMaxYMid':

                    react.style.transformOrigin = 'right center';

                    react.style.left = (svgW - reactW) + 'px';

                    react.style.top = (svgH - reactH) / 2 + 'px';

                    break;

                case 'xMaxYMax':

                    react.style.transformOrigin = 'right bottom';

                    react.style.left = (svgW - reactW) + 'px';

                    react.style.top = (svgH - reactH) + 'px';

                    break;

            }

        }

        preserveAspectRadioFirst(align.value);

        let awaitFn = () => {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    react.style.transitionDuration = '0s';

                    resolve()

                })

            })

        }

        let inputs = document.querySelectorAll('input');

        let selects = document.querySelectorAll('select');

        let disableEle = () => {

            for (let i = 0; i < inputs.length; i++) {

                inputs[i].setAttribute('disabled', 'disabled')

            }

            for (let i = 0; i < selects.length; i++) {

                selects[i].setAttribute('disabled', 'disabled')

            }

        }

        let enbledEle = () => {

            for (let i = 0; i < inputs.length; i++) {

                inputs[i].removeAttribute('disabled')

            }

            for (let i = 0; i < selects.length; i++) {

                selects[i].removeAttribute('disabled')

            }

        }

        let step = 1;

        btn.addEventListener('click', async e => {

            if (step % 2) {

                btn.innerHTML = '初始化'

                disableEle();

                react.style.transition = "transform 5s";

                const svgW = viewportWidthNumber.value;

                const svgH = viewportHeightNumber.value;

                const reactW = viewBoxWidthNumber.value;

                const reactH = viewBoxHeightNumber.value;

                svg.style.width = svgW + 'px';

                svg.style.height = svgH + 'px';

                react.style.width = reactW + 'px';

                react.style.height = reactH + 'px';

                let p = (reactW / reactH) / (svgW / svgH) > 1;//p>1,viewbox宽先到viewport的宽 p<1,viewbox高先到viewport的高

                let s = meetOrSlice.value;

                let scaleX = svgW / reactW;

                let scaleY = svgH / reactH;

                let scale = p ?

                    s == 'meet' ? scaleX : scaleY :

                    s == 'meet' ? scaleY : scaleX;

                //note

                let derector = p ?

                    s == 'meet' ? 'x轴' : 'y轴' :

                    s == 'meet' ? 'y轴' : 'x轴';

                percent.innerHTML = scale;

                direction.innerHTML = derector;

                note.style.visibility = 'visible';

                //note

                react.style.transform = "scale(" + scale + ")";

            } else {

                note.style.visibility = 'hidden';

                enbledEle()

                await awaitFn()

                react.style.transform = 'scale(1)'

                react.style.background = 'green'

                btn.innerHTML = '运动动画'

            }

            step++;

        })

        react.addEventListener('transitionend', e => {

            if (e.propertyName == 'transform') {

                react.style.transition = "background 5s";

                react.style.background = 'transparent';

            }

        });

    </script>

</body>

</html>

运行例子

viewport的理解

例子

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

<svg width="400" height="300"  style="border:1px solid red">

    <rect width="40" height="30" fill="green"/>

</svg>

运行图片

viewBox

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

例子1

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

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

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

width:初始矩形宽度

height:初始矩形高度

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

<svg width="400" height="300"  style="border:1px solid red">

        <rect width="40" height="30" />

</svg>

<svg width="400" height="300" viewBox="0 0 40 30"  style="border:1px solid red">

        <rect width="40" height="30" />

</svg><br/>

<svg width="400" height="300" viewBox="0 0 80 30"  style="border:1px solid red">

        <rect width="40" height="30" />

</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. jQuery汇总

    closest() 方法返回被选元素的第一个祖先元素. $("span").closest("ul")返回 <span> 的第一个祖先元素,是一个 ...

  2. 2018-2019-2 20175202实验二《Java面向对象程序设计》实验报告

    2018-2019-2 20175202实验二<Java面向对象程序设计>实验报告 一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初 ...

  3. 15.1 打开文件时的提示(不是dos格式)去掉头文件

    1.用ultraedit打开文件时,总提示不是DOS格式 2.把这个取消.dos格式只是用来在unix下读写内容的,此功能禁用即可.

  4. ORA-00257: archiver error. Connect internal only, until freed……

    今天给客户测 试问题,让客户把数据发过来了.解压缩后一看,他们还是用的oracle 815版本的(他们exp导出时,带了导出日志,从导出日志中看出来是oracle 815版本的),不过没有关系,低版本 ...

  5. 华硕ASUSPRO P5440UA笔记本电脑安装驱动

    领了一台公司的办公笔记本,按照套路重装了系统(win10),后面发现悲剧了 采坑1: 从华硕通过型号搜索下来的无线网卡(WIFI) 驱动无法安装(双击启动没有反映) 解决:通过设备Id上google搜 ...

  6. MariaDB的安装与启动

    MariaDB的安装与启动 1.安装前需要删除系统已存在的mysql及mariadb [root@vm172--- ~]# rpm -qa|grep mysql [root@vm172--- ~]# ...

  7. GP中Geoprocessor.Execute(string name, IVariantArray parameters, ITrackCancel trackCancel)

    在做一个项目的过程中,发现GP运算方法 Execute(string name, IVariantArray parameters, ITrackCancel trackCancel) 与Execut ...

  8. 窗口关闭时弹出内存不能为read

    出现这个错误的原因是:某个指针类型的变量或对象,其记录的内容不可用,但进程对其进行了访问.可能由于:指针类型的变量或对象未被赋值就被使用:或者已经被正常释放后,又被访问所致.由于是在结束进程时报这样的 ...

  9. ASP.NET Core 1.1版本之Hello word

    1.下载ASP.NET Core 1.1版本,并且安装. 2.新建一个工作文件夹,本文以WebApiFrame名称为例建立一个新的文件夹: mk WebApiFrame 3.启动命令行,在命令行中进入 ...

  10. CentOS 7下Samba服务安装与配置详解

    1. Samba简介 Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共 ...