直接运行此例子

深入理解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. Java 内部类的作用

    1.内部类可以很好的实现隐藏 一般的非内部类,是不允许有 private 与protected权限的,但内部类可以 2.内部类拥有外围类的所有元素的访问权限 3.可是实现多重继承 4.可以避免修改接口 ...

  2. 18.7 修改IP地址

    ifconfig   #查看ip sudo ifconfig eth3 10.3.10.232      #修改ip

  3. (转)初学Git及简单搭建git服务器和客户端

    终于搞定,mac自己作为git服务器,mac也是客户端,如何免登 从另外一个linux服务器的上传公钥得到提示 ssh-copy-id -i ~/.ssh/id_rsa.pub git@192.168 ...

  4. volatile和不加volatile的区别

    http://blog.chinaunix.net/uid-25100840-id-3067899.html 对于一个地址,如果加上了volatile参数,这个地址也就不会经过编译器优化,也就是说这个 ...

  5. 内存泄漏学习案例-1-ArrayList

    解决 内存泄漏 于是赶快登陆探测服务器,首先是 top free df 三连,结果还真发现了些异常. 我们的探测进程 CPU 占用率特别高,达到了 900%. 我们的 Java 进程,并不做大量 CP ...

  6. JS将图片转为base64

    var getDataFromImg = function(img) { var canvas = document.createElement('canvas'); var context = ca ...

  7. IOS屏幕旋转思路和实践

    这段时间同事在做一个直播项目,项目有个需求:一个界面需要手动设置屏幕的方向,设置好之后方向不能变化.完成这个需求花了特别大的精力,归因是网上关于屏幕旋转的知识比较凌乱,解决问题花费不少时间,最后决定把 ...

  8. 本文讲述下windows下使用rsync备份数据

    本文讲述下windows下使用rsync备份数据 需要使用的软件如下: 环境需求: 上海monitor上跑有定时任务计划备份线上数据库,现在需要把上海monitor上的备份数据拉回到179.12数据回 ...

  9. oracle over 函数几个例子

    测试使用的数据为scott/tiger模式下的emp表: 我们使用JOB和SAL这两个列测试: 上面语句指按照职业JOB分组(partition by job)然后在每个分组内,按照薪水(sal)进行 ...

  10. 获取sd卡空间大小和获取sd卡目录

    获取sd卡空间大小 TextView tv_total_size = (TextView)findViewById(R.id.textView1); TextView tv_useable_size ...