直接运行此例子

深入理解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. 使用LAP数据集进行年龄训练及估计

    一.背景 原本是打算按<DEX Deep EXpectation of apparent age from a single image>进行表面年龄的训练,可由于IMDB-WIKI的数据 ...

  2. MessageFormat.format 包含单引号引起的不可替换

    MessageFormat.format("region = '{0}'", "en");实际结果是region = {0}如果需要被替换的话,需要用双单引号 ...

  3. NGUI外包开发总结一下今天的收获

    先总结一下今天的收获:在一个脚本类中对其成员变量进行初始化时,什么时候在Awake()中,什么时候在Start()中是有讲究的. 1)当成员变量会被外部脚本引用时,尤其是该成员变量是一个自己定义的非脚 ...

  4. CentOS7.5 安装MySQL8 tar

    1.查看是否安装mariadb 执行命令: [root@mysql ~]# rpm -qa | grep mariadb 显示: mariadb-libs-5.5.56-2.el7.x86_64 2. ...

  5. 在IE中下载Office2007文件时在对话框中下载文件变成ZIP文件的问题

    导致原因: 从IIS或者Tomcat之类的Web服务器通过二进制流下载文件时(比如通过设置Header为Content-disposition:inline),如果被下载的文件是Office2007的 ...

  6. pc端布局的一点思考

    编写pc端页面需要注意些什么? 1.自适应最小屏幕,在小屏幕上样式不能错乱. 在桌面屏幕各分辨率使用比例中可以看到各桌面分辨率的使用比例,日常pc端开发我们会考虑到适配1024宽度大小的屏幕. 对于管 ...

  7. 红米手机5 Plus完美刷成开发版获取root权限的教程

    小米的设备不同手机型号通常情况小米官方都提供两个不同系统,可分为稳定版和开发版,稳定版没有提供ROOT超级权限管理,开发版中就提供了ROOT超级权限,较多时候我们需要使用的一些功能强大的工具,都需要在 ...

  8. Java中的io流学习（了解四大基类和基本步骤）

    Java中io流四大基类及io流操作四大基本步骤 io流:(input/output)即输入输出流.面向对象的思想之一是面向接口编程,面向父类编程,也就是多态.所以学好基类(父类)很重要. 分类 按处 ...

  9. 机器学习笔记之三-yolov3+win7+vs2017+gpu+opencv编译

    1.环境安装 1.1 vs2017+cuda9.1+cudnn7.0可以和tensorflow一起安装网上教程多,不多说.       唯一需要注意的是vs2017要安装好2015版本的工具集v140 ...

  10. SQL Server 2008 R2中配置作业失败后邮件发送通知

    SQL Server日常维护中难免会遇到作业失败的情况.失败后自然需要知道它失败了,除了例行检查可以发现出错以外,有一个较实时的监控还是很有必要的.比较专业的监控系统比如SCOM虽然可以监控作业执行情 ...