直接运行此例子

深入理解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. saltstack总结-2018-0620

    以下结论 结论1由于minion配置文件里能配置的只有master的IP和master的ret_port,而无法指定master的publish_port因此minion获取的master的publi ...

  2. DNS 负载均衡

    相关文章: 文章 网址 一个域名可以绑定多个IP吗?由此引发的调查 https://ask.zkbhj.com/?/article/139

  3. is_numeric — 检测变量是否为数字或数字字符串

    is_numeric — 检测变量是否为数字或数字字符串 bool is_numeric ( mixed $var ) 如果 var 是数字和数字字符串则返回 TRUE ,否则返回 FALSE . 参 ...

  4. Visual Studio Code Java输出中文乱码的问题

    Visual Studio Code 推出了java插件,最近适用了一把,非常不错,但是有个很明显的bug.就是中文乱码,具体现象有如下: 1.System.out.println 控制台输出乱码. ...

  5. SqlServer ：实现树形结构递归查询(无限极分类)

    SQL Server 2005开始,我们可以直接通过CTE来支持递归查询,CTE即公用表表达式 公用表表达式(CTE),是一个在查询中定义的临时命名结果集将在from子句中使用它.每个CTE仅被定义一 ...

  6. 使用velodyne16线激光雷达跑loam-velodyne

    一.velodyne-VLP16使用教程 推荐网址: http://blog.csdn.net/littlethunder/article/details/51920681 https://www.c ...

  7. sql语句可以截取指定字段后面的字符串

    select id,substring(Memo,charindex('数量',Memo)+3,len(Memo)-charindex('数量',Memo)) from trace where Mem ...

  8. Elisp 中变量赋值函数 set 与 setq 辨析

    在 Elisp 中,为变量赋值的函数有 set 与 setq,但是,两者存在很大的差异. 使用 set 赋值: 如果我们想为变量 flowers 赋值为一个 列表 '(rose violet dais ...

  9. Python——Sublime Text3编写Python的一些问题

    1.回车键不能结束input()函数,如何解决? https://www.cnblogs.com/pcat/p/5499964.html  安装了该插件后,会遇到一些麻烦,这样运行Python程序很不 ...

  10. layer弹出层父子页面交互（子页面form表单提交）

    例如:父页面中有数据需要修改,但不需要跳转到下一个页面进行处理 例图: