SVG适应不一样的情形

时间 2019-12-04

标签 svg 适应不一样情形繁體版

原文原文链接

1、svg铺满全屏

今天设计给了一张svg的图片作背景，可是通过两个小时的纠结，发现就是没法铺满元素，而后通过高人指点，发现是svg图片的缘由，百度后果真能解决问题。javascript

解决：css

在webstorm里面打开svg图片，而后在svg标签上面加上属性：preserveAspectRatio="none meet";html

<svg width="1264px"    
 height="722px"    
 viewBox="0 0 1264 722"  
   version="1.1"    
 xmlns="http://www.w3.org/2000/svg"    
 xmlns:xlink="http://www.w3.org/1999/xlink"    
 preserveAspectRatio="none meet"
/>复制代码

2、svg等比自适应java

SVG格式自己就是矢量图形格式，能够随意缩放。可是若是若是整个画面都是经过SVG进行搭建，同一个SVG图形嵌入在HTML中，要同时知足多个分辨率屏幕的查看，仍是须要进行一些额外的设置，包括JS动态设置width、height等。 jquery

用户在设计SVG图形的初期，先要肯定该SVG图形的大体画面比例和查看方向，好比：该画面是在手机上查看仍是Pad上查看仍是pc上；还有，容许该画面只是上下滑动查看（对于高度远大于宽度的状况），仍是画面只是左右滑动查看等。肯定了以上的信息，要设计一个能够在多分辨率屏幕下自适应的SVG画面，有如下几个步骤 web

1.在SVG根标签中添加 preserveAspectRatio="xMinYMin meet" 属性该属性指定SVG图形在屏幕的最左上角开始显示，而且保持等比缩放。 bash

2.在SVG跟标签中添加 viewBox 属性该属性来设置SVG画布的大小，但该大小是一个相对的大小，并非绝对尺寸大小。好比设定一个viewBox="0,0,800,3000"，能够认为将画布大小的宽分为800份，高分为3000份，而后全部SVG的元素都在800*3000所分割成的画布上摆放。这时候不用考虑屏幕实际高宽。再次提醒注意：viewBox将画布分为800*3000份的小格子，而后全部的元素在该画布上摆放。至于该格子的绝对大小，则根据咱们后面所设定的width height单位来决定。webstorm

3.添加SVG元素。注意，各个SVG元素的高宽和xy坐标都按照800*3000的大小来设置，也就是说若是想要在最右下角放一个100*100的矩形，那么就应该写成 <rect x="700" y="2900" width="100" height="100" fill="red" /> 咱们上面已经说过，这时候不用关心实际屏幕的高宽，只按照viewBox画布大小进行设置。svg

4.调用JS函数动态设置svg元素的高宽，进行自适应调整。在这一步要肯定如何查看该画面，对于该画面800*3000，咱们设定为只能上下滑动查看，左右固定宽度的方式。
函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FreezeWidth</title>
<link rel="stylesheet" href="screen.css">
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="./screen.js"></script>
<script type="text/javascript">
    $(function() {
        var svgRootDom = $("#sketchpad")[0];
        adjustToFreezeWidth(svgRootDom);
    });
    
</script>
</head>
<body style="background-color: black;">
<svg id="sketchpad" preserveAspectRatio="xMinYMin meet" viewBox="0,0,3000,3000">
    <rect x="0" y="0" width="100%" height="100%" fill="green"/>
    <rect x="10" y="10" width="100" height="100" fill="orange" />
    <rect x="200" y="300" width="90" height="90" fill="orange" />
    <circle cx="400" cy="1500" r="50" fill="gray" />
    <rect x=700 y="2900" width="100" height="100" fill="blue" />
    
</svg>
</body>
</html>复制代码

function adjustToFreezeWidth(rootSvg) {
    var windowWidth = $(window).width();
 
    var viewBoxVal = rootSvg.getAttribute("viewBox");
    var viewBoxWidth = viewBoxVal.split(",")[2];
    var viewBoxHeight = viewBoxVal.split(",")[3];
    rootSvg.removeAttribute("width");
    rootSvg.removeAttribute("height");
 
    var setWidth = windowWidth;
    var setHeight = (setWidth * viewBoxHeight) / viewBoxWidth;
    rootSvg.setAttribute("width", setWidth);
    rootSvg.setAttribute("height", setHeight);
}
 
function adjustToNone(rootSvg) {
 
    var viewBoxVal = rootSvg.getAttribute("viewBox");
    var viewBoxWidth = viewBoxVal.split(",")[2];
    var viewBoxHeight = viewBoxVal.split(",")[3];
    rootSvg.removeAttribute("width");
    rootSvg.removeAttribute("height");
 
    rootSvg.setAttribute("width", viewBoxWidth);
    rootSvg.setAttribute("height", viewBoxHeight);
 
}
 
function adjustToFreezeHeight(rootSvg) {
 
    var windowHeight = $(window).height();
 
    var viewBoxVal = rootSvg.getAttribute("viewBox");
    var viewBoxWidth = viewBoxVal.split(",")[2];
    var viewBoxHeight = viewBoxVal.split(",")[3];
    rootSvg.removeAttribute("width");
    rootSvg.removeAttribute("height");
 
    var setHeight = windowHeight;
    var setWidth = (setHeight * viewBoxWidth)/viewBoxHeight;
    rootSvg.setAttribute("width", setWidth);
    rootSvg.setAttribute("height", setHeight);
}
 
function adjustToFreezeAll() {
 
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    
    rootSvg.removeAttribute("width");
    rootSvg.removeAttribute("height");
 
    rootSvg.setAttribute("width", windowWidth);
    rootSvg.setAttribute("height", windowHeight);
 
}
--------------------- 
做者：食肉动物 
来源：CSDN 
原文：https://blog.csdn.net/kungstriving4/article/details/25186553 
版权声明：本文为博主原创文章，转载请附上博文连接！复制代码