使用svg让页面自适应浏览器大小，整体等比缩放

mapaler 2019-12-23

网页代码：

<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:0;
padding:0;
width:100%;
height:100%;
background-color: #282828;
}

/*自定义悬浮菜单中滚动条*/

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #cecece;
    border-radius: 5px;
    box-shadow: none;
    border: 0;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #cecece;
    border-radius: 5px;
    box-shadow: none;
    border: 0;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

</style>
</head>
<body>
  <svg id="main" style="margin: 0px; overflow: hidden;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  data-version="v6.5.36" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1452 860" width="1452" height="860"><image xlink:href="./jxsbback.png" x="0px" y="0px" width="1452px" height="860px"></image><foreignObject x="383px" y="165px" width="682px" height="384px"><video width="100%" height="100%" controls="controls" autoplay="autoplay"><source src="./video/aaa.mp4" type="video/mp4" /></video></foreignObject></svg>
  <script type="text/javascript">
     //调整浏览器窗口大小事件 
    window.onresize = function(){
        _autoZoom();
    }
    _autoZoom();
    function _autoZoom(){
         var svg = document.getElementById("main");
        if (svg) {
            svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
            svg.setAttribute("viewBox", "0 0 1452 860");
            svg.style.overflow = "hidden";
            var viewBoxVal = svg.getAttribute("viewBox");
            if (viewBoxVal) {
                var viewBoxWidth = viewBoxVal.split(" ")[2];
                var viewBoxHeight = viewBoxVal.split(" ")[3];
                svg.removeAttribute("width");
                svg.removeAttribute("height");

                var setWidth = document.body.clientWidth;
                var setHeight = setWidth * viewBoxHeight / viewBoxWidth;
                svg.setAttribute("width", setWidth);
                svg.setAttribute("height", setHeight);
            }
        }
    }
</script>
</body>
</html>
mapaler

mapaler

相关推荐

如何使用SVG动画来制作游戏

在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的css动画简直是绝配。于是我便打算深入地研究一下，看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样，好的游戏拥有

mapaler / 0评论 2020-07-17

Canvas 和 SVG 有什么区别？

canvas与svg都是可以在浏览器上创建图形，因此，在html5中感觉canvas和svg很相似，但是实际上canvas与svg有着根本的区别。下面php中文网通过比较canvas和svg之间的不同来给大家总结了关于canvas与svg的区别。一起来看一

MIKUScallion / 0评论 2020-07-05

解决nginx下加载eot|otf|ttf|woff|svg等404 错误问题

application/x-font-truetype ttf; application/x-font-woff woff woff2;（可省略）。location ~* \.$ { root /www; ad

Dickzeng / 0评论 2020-07-05

svg mousemove mouseout闪烁问题

尽量对一个图元进行绑定事件。例如，你编写了一个tooltip功能。mouseover元素A后，tooltip图层的z-index一定比当前元素A的z-index大的，这可能就形成tooltip组件对元素A的覆盖问题。鼠标稍微移动，会自动触发元素A的mous

wallowyou / 0评论 2020-06-28

将PDF转为 Word（支持Docx、Doc）、Html、XPS、SVG、PS、PCL、PNG

将XPS转为Word、Html、PDF、SVG、PS、PCL、PNG. String destFilepath = "output/XPStoPS.ps";//结果文档路径

hermanncain / 0评论 2020-06-25

SVG：可伸缩的矢量图形

由于结构是XML格式，使得它可以插入HTML文档，成为DOM的一部分，然后用JavaScript和CSS进行操作。一个简单的SVG文件如下：。SVG代码也可以单独写在一个文件中，后缀是“.svg”，然后用在<img>、<object>

mapaler / 0评论 2020-06-21

getElementsByNames无法获得对应的svg标签

对于页面中存在的name=‘circleSVG‘的标签，getElementsByNames无法获取。而getElementsByNames只返回属于HTML语言的标签

Dickzeng / 0评论 2020-06-17

小技巧：如何用 Chrome 将 SVG 转成 PNG

怎么把 SVG 转成 PNG ？用 Chrome 吧，非常好用，还能设定自己想要的尺寸。SVG 是基于 XML 、用于描述二维矢量图形的一种图形格式。SVG 由 W3C 制定，是一个开放标准。尤其 SVG 图标，一般 24x24 黑色。Sketch 导入

程序员俱乐部 / 0评论 2020-06-11

css改变svg的颜色

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

lanzhusiyu / 0评论 2020-06-09

SVG

css canvas和svg又有什么区别？位图的质量是根据分辨率判定的，分辨率越大，图像画面越清晰；矢量图没有分辨率的概念。canvas类似于位图，放大后会不清晰，依赖于分辨率。可以引入jpg，png这类格式的图片，大量的大型网络游戏也是用的canvas画

hermanncain / 0评论 2020-05-09

X3 SVG每天自动备份并压缩

一．自动备份SVG二．将SVG备份移动到指定目录中注意：需要用WinRAR压缩工具1.编辑BAT文件@echo offecho Running No.1 JOB--set a=%date:~4,2%set b=%date:~7,2%set c=%date:

Elena0 / 0评论 2020-04-11

Python数据可视化（Pygal、svg、csv、Bar、Line）

需要查看它的源文件，才能显示图片。相同的图形但水平，范围为0-100。直方图是特殊条形，它为条形图取3个值：纵坐标高度，横坐标开始和横坐标结束。

Leonwey / 0评论 2020-04-11

svg动画效果

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>. <animate attributeType=&qu

wallowyou / 0评论 2020-03-05

canvas与svg的区别

　　　　1、svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；　　　　2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。

jinxiutong / 0评论 2020-02-10

Canvas和svg总结比较

strokeStyle：设置描边样式fillStyle：设置填充样式stroke()：描边fill()：填充。fillRect()：填充矩形strokeRect()：描边矩形clearRect()：清除画布矩形区域。无论是刚才执行的变换，还是fillSty

jinxiutong / 0评论 2020-02-03

php 实现svg转化png格式的方法分析

本文实例讲述了php 实现svg转化png格式的方法。分享给大家供大家参考，具体如下：。2）字体不展示；3）svg文件中style标签样式不能解析；svg.innerHTML = '<rect width="100%" heigh

mqbeauty / 0评论 2020-01-08

UWP SVG 转 Glyph

UWP对SVG的支持很不友好，仅可以通过Image来展示，不能在App内部设置前景色等Style。不过现在有一个第三方的网站，可以把SVG矢量文件转化为Glyph字体，这样就可以像Segoe MDL2一样，自己定义大小颜色了。打开Glyphter，便可以看

mapaler / 0评论 2020-01-17

SVG以及它的使用方式

计算机中有2种图形，一种是位图，一种是矢量图。传统的jpg/png/gif图都是位图。位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px. 矢量图是用XML格式定义,通过各种「路径」和「填充颜色」来描述渲染的的图片。矢量图的缺点和优点。如果

Elena0 / 0评论 2020-01-12

使用svg把小球按照制定轨迹进行运动

<path d="m 227.6035,38.929859 c -17.098,-6.615379 -35.43714,-5.654746 -53.72008,-5.654746 -28.88045,0 -78.608562,23.4367

mapaler / 0评论 2020-01-05

svg基础知识梳理

<rect><circle><ellipse><line><polyline><polygon>矩形---圆形————椭圆———直线——折线—————多边形PS：<path>

Dickzeng / 0评论 2020-01-05

svg 和 canvas

context.rect; //创建矩形形状context.fill(); //填充矩形。/*描边三角形*/ context.beginPath(); context.moveTo; context.lineTo; context.

mapaler / 0评论 2019-12-27

svg画圆环

之前我已经分享了一篇css画圆环，为啥今天还要分享一篇svg画圆环呢?原因是：css画圆环在部分ipone手机会有bug，最大张角为90°，所以圆环会有白色的间隙。<svg class="c-c-c">　　　　　<!-

hermanncain / 0评论 2019-12-24

JPG、PNG、GIF、SVG、WebP 等格式图片区别

有助于优化产品和适配的两种图片格式：WebP&SVG. JPG、PNG、GIF、SVG 等格式图片区别

mapaler / 0评论 2019-12-24

Canvas和SVG区别

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。是逐像素进行渲染的。其位置发生改变，会重新进行绘制。SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG

大地飞鸿 / 0评论 2019-12-23

svg入门详解

SVG 意为可缩放矢量图形。SVG 是使用 XML 来描述二维图形和绘图程序的语言。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。SVG 是万维网联盟的标准。SVG 图像可被搜索、索引、脚本化或压缩；SVG 文件可通过以下标签嵌入 HTML

Dickzeng / 0评论 2019-12-20

cefsharp wpf wpf加载svg 在同一个页面中打开链接

CefSharp中控制弹窗的接口是 ILifeSpanHandler，对OnBeforePopup进行重写。public bool OnBeforePopup(IWebBrowser browserControl, IBrowser browser, IF

Elena0 / 0评论 2019-12-12

web流程图设计svg

<?xml version="1.0" standalone="no"?>. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN". st

hermanncain / 0评论 2014-01-22

html5之svg

矢量图，缩放不变形。<rect x="10" y="10" width="50" height="50" rx="5" ry="5"

skyGAYD / 0评论 2019-11-18

svg-icon

原理：symbol + use:xlink:href;svg-sprite-loader生成雪碧图;require.context动态引入所有文件；

Irelia / 0评论 2019-11-18

Angular7 中使用 svg sprite

看到项目中很多svg，使用方法都是使用img标签引入。于是就想将svg合并，像字体图标那样方便使用。在网上了解到可以将众多svg文件合并成一个，用symbol+id的方式区分不同的svg图案，然后使用use 标签引用。也就是说，要想兼容ie，就必须要把合成

codebiubiu / 0评论 2019-11-17

数据可视化系列--svg入门基础（二）

svg是伸缩矢量图像。矩形使用<rect></rect>标签来进行绘制。<rect x="10" y="10" width="100" height="10

hermanncain / 0评论 2019-11-17

SVG-标签

<line> 标签用来创建线条。<polyline> 标签用来创建仅包含直线的形状。<polyline stroke="red" fill="black" stroke-width=&q

hermanncain / 0评论 2019-11-09

vue中，svg图标添加click事件，部分浏览器不生效

vue项目中，使用svg图标，但是发现，为svg图标绑定click事件时，部分浏览器会出现，点击没有反应的情况，代码如下：

hermanncain / 0评论 2019-11-09

svg 线条动画

animation: depict 2s linear 0s 1 normal forwards;

hermanncain / 0评论 2019-11-05

用SVG 制作 Sprites的图标系统

我一直是图标字体的大力支持者。很多网站真的需要一个图标系统，图标字体提供了一个该死的精细系统。但是，我认为假设你对 IE 9+ 很好，使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。首先让我们介绍它的工作原理。处理图标的一个

zwblcz / 0评论 2019-11-04

canvas与svg区别

2.由于不是以DOM形式展示，canvas是一个整体，不能给画上图形添加事件，只能给canvas整体添加事件

蒲厷渶戀 / 0评论 2019-11-03

SVG 优化探索

在前端开发中或多或少都有用到 SVG，本篇文章就来总结下如何在前端项目中使用 SVG，每种使用方式的优缺点分析，以及对 SVG 的一些优化探索。SVG是一种基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。这里简要说明下位图与矢量图的区别：位图是由像

Dickzeng / 0评论 2019-11-03

vue-cli项目中使用svg图标

在src/icons/index.js中使用webpack的require.context自动引入src/icons下面所有的图标。首先需要注意的是，通过 vue-cli3 构建的项目可以初始化进行很多选择，我构建的目录更多的是以 *.config.js

wallowyou / 0评论 2019-11-02

微信公众号 SVG长按互动

style="display: block;width: 100%;height:667px;overflow:hidden;margin-top: -1px;vertical-align: top;background-position: 0%

Elena0 / 0评论 2019-10-24

vue中引入.svg图标，使用iconfont图标库

阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用，官方介绍。svg文件夹中用来存放各种扩展的.svg图标。ok，大功告成，这样就可以在.vue页面中直接使用.svg文件了。使用.svg文

mapaler / 0评论 2019-10-22

Batik - HighCharts / hchartscn有用到它来将svg图形转换很各种图片格式

用Batik的SVG的查看组件 ，应用程序或小程序可以很容易地集成SVG的浏览和交互功能。Batik工程的其他目的是使它具有高度的扩展性。可缩放矢量图形，是一个W3C的推荐标准。

王之白石 / 0评论 2014-10-26

抖音抖一抖-SVG和CSS视觉故障艺术小赏

故障艺术，英文名称叫glitch，在很多赛博朋克作品中经常看到，其实就是故意表现一种显示设备的小故障效果，抖音的图标其实就是这种的效果，我们看下这个图标。这个图标中的红色和蓝色的偏移其实就是一种故障艺术，看到这个，我就能想到早年我家还没有有线电视时，摇天线

ThikHome / 0评论 2019-10-08

SVG矢量绘图 path路径详解（基本画法）

SVG的形状标签里，path是最强大的一个，掌握了path就足够处理常见的绘图问题了。先看一下path标签的基本用法:. path标签通过属性d来定义路径，定义信息由一段字符串构成，另外path也可以通过fill和stroke属性来定义填充和边框。d属性的

nht0 / 0评论 2014-07-07

BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点

一张图片可以储存为多种格式，为什么有的几十KB，有的几百MB，有的静止不动，有的是好几个画面循环播放？在项目开发的过程中经常会读取或保存图像文件，不同类型的图像特点不同，适用的范围也不同，简要介绍BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特

mozhi00 / 0评论 2019-10-04

SVG动画入门（二）

Each value from the <begin-value-list> can be one of the following:. A Clock-value that represents a point in time relativ

Mofier / 0评论 2015-07-22

SVG技术入门：线条动画实现原理

相信大家都见到过这样神奇的技术：一副线条构成的画能自动画出自己。Jake Archibald是这种SVG技术的首创者，并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。Polygon使用它在一篇设计方面的文

mqbeauty / 0评论 2015-07-22

如何使用CSS来修改SVG原点和制作SVG动画

SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。多数情况下，SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之

purecss / 0评论 2015-07-22

SVG动画入门

今天我们继续来学习SVG动画方面的知识。一听到动画效果，你可能就觉的头都打啦。不要担心，SVG本身提供的动画属性非常容易使用，今天我们就来学习一下基础的知识。在上面的代码中，我们在元素里面添加了一个<animate>的标签。dur 这个是用来指

ankela / 0评论 2015-07-16

SVG 教程 （六）SVG 阴影，SVG 渐变 - 线性，SVG 渐变- 放射性

所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜？<feOffset>元素是用于创建阴影效果。

hermanncain / 0评论 2015-07-16