直接运行此例子

深入理解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. C# 如何保证对象线程内唯一：数据槽（CallContext）【转载】

    如果说,一个对象保证全局唯一,大家肯定会想到一个经典的设计模式:单例模式,如果要使用的对象必须是线程内唯一的呢? 数据槽:CallContext,ok看下msdn对callcontent的解释. Ca ...

  2. 1.2.8 Excel做个滚动抽奖

    1.首先要准备好数据库: 2.用RAND函数来生成随机数字,做一个辅助列: 3.制作抽奖界面: 4.输入公式: 在F3中输入下列公式并填充至F5: =INDEX(A:A,MATCH(SMALL(B:B ...

  3. [转]Linux编译和安装boost库

    1. 下载boost安装包并解压缩 到http://www.boost.org/下载boost的安装包,以boost_1_58_0.tar.gz为例 下载完成后进行解压缩: tar zxvf boos ...

  4. MQTT研究之EMQ：【JAVA代码构建X509证书】

    这篇帖子,不会过多解释X509证书的基础理论知识,也不会介绍太多SSL/TLS的基本信息,重点介绍如何用java实现SSL协议需要的X509规范的证书. 之前的博文,介绍过用openssl创建证书,并 ...

  5. RK3399/NanoPC-T4开发板使用/sys/class/gpio操作外接GPIO设备-【申嵌视频-RK3399篇】

    实验2:RK3399/NanoPC-T4开发板使用/sys/class/gpio操作外接GPIO设备,比如外接一个LED模块,通过GPIO1_A0管脚 1 介绍   LED模块   Matrix-LE ...

  6. VS2015 使用GIT同步到github

    https://www.cnblogs.com/newP/p/5732431.html(参考) 拉取(Pull):将远程版本库合并到本地版本库,相当于(Fetch+Meger) 获取(Fetch):从 ...

  7. PySide2兼容PySide1的补丁代码

    Maya2017以及Nuke10的PySide都升级到PySide2了,之前PySide1的大量代码都无法在新软件上使用,这主要是由于PySide2不仅调整了模块位置,还增删了一系列模块,下面我分享一 ...

  8. 提取配置文件中无注释的内容方法--findstr

    findstr /v /r # nginx.conf C:\Users\Liang>findstr /?在文件中寻找字符串. FINDSTR [/B] [/E] [/L] [/R] [/S] [ ...

  9. 工控随笔_13_西门子_WinCC的VBS脚本_04_变量类型之二

    上一个随笔说了一些关于vbs变量类型的内容,这一篇我们继续说说变量类型相关的内容. 一.NULL补充内容 '需要注意的是,NULL不能简单通过 = 来进行比较,而必须通过 'IsNull函数来实现 ' ...

  10. @RequestParam、@ReqeustBody、@ReponseBody认识

    简介: @RequestParam和@RequestBody均是处理request body部分的注解,都用于获取请求部分的参数. @ResponseBody是用于响应部分的注解 1. @Reques ...